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内 容 提 要 


JavaScript 这 门 语言 简单 易 用 ， 很 容易 上 和 手 ， 但 其 语言 机 制 复杂 微妙 ， 即 使 是 经 验 丰 富 的 
JavaScript 开发 人 员 ， a it 习 的 话 也 无 法 真正 理解 。 本 套 书 直面 当前 JavaScript 开发 人 
员 不 求 其 解 的 大 趋势 ， 深 入 理解 语言 内 部 的 机 制 ， 全 面 介绍 了 JavaScript 中 常 被 人 误解 和 忽视 的 重 
要 知识 点 。 本 书 是 其 中 卷 ， 主 要 介绍 了 类 型 、 语 法 、 异 步 和 性 能 。 

本 书 既 适合 JavaScript 语言 初学 者 了 解 其 精髓 ， 又 适合 经 验 丰 富 的 JavaScript 开发 人 员 深 
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JavaScript 从 互联 网 戎 芽 时 期 开始 就 一 直 是 实现 交互 体验 的 基本 技术 。 虽 然 最 初 被 用 来 实 
现 闪 烁 的 鼠标 轨迹 和 烦人 的 弹出 消息 框 ， 但 在 大 约 二 十 年 以 后 ， 它 在 技术 和 功能 方面 都 得 
到 了 很 大 的 提升 ， 几 乎 没有 人 再 质疑 它 在 互联 网 中 的 重要 地 位 。 




















但 是 ， 作 为 一 门 编程 语言 ，JavaScript 一 直 为 人 诉 病 ， 部 分 原因 是 其 历史 治 革 ， 更 重要 的 
原因 则 是 其 设计 理念 。 因 为 JavaScript 这 个 名 字 ，Brendan Eich 曾 戏称 它 为 “ 傻 小 弟 ”( 相 
对 于 成 熟 的 Java 而 言 )。 实 际 上 ， 这 个 名 字 完 全 是 政治 和 市 场 考量 下 的 产物 。 两 门 语言 
间 千 差 万 别 , “JavaScript” 之 于 “Java” 就 如 同 “Carnival” (嘉年华 ) 之 于 “Car”( 汽 车 ) 
一 样 ， 两 者 之 间 并 无 半点 关系 。 















































JavaScript 在 概念 和 语法 风格 上 借鉴 了 其 他 编程 语言 ， 包 括 C 风格 的 过 程式 编程 和 隐 史 的 
Scheme/Lisp 风格 的 函数 式 编程 ， 这 使 得 它 能 为 不 同 背 景 的 开发 人 员 所 接受 ， 包 括 那 些 没 
有 多 少 编程 经 验 的 人 。 用 JavaScript 编写 一 个 “Hello World” 程 序 非常 简单 。 














JavaScript 可 能 是 最 容易 上 手 的 编程 语言 之 一 ， 但 它 的 一 些 奇 特 之 处 使 得 它 不 像 其 他 语言 
那样 容易 完全 掌握 。 要 想 用 C 或 者 C++ 开发 一 个 完整 的 应 用 程序 ， 开 发 者 需要 对 该 门 语 
言 有 相当 深入 的 了 解 。 然 而 对 于 JavaScript， 即 使 我 们 用 它 开发 了 一 个 完整 的 系统 也 不 见 
得 就 能 深入 理解 它 。 








这 门 语 言 中 有 些 复 杂 的 概念 隐藏 得 很 深 ， 却 常常 以 一 种 看 似 简单 的 形式 呈现 。 例 如 ， 将 函 
数 作为 回调 函数 传递 ， 这 让 JavaScript 开发 人 员 往 往 满足 于 使 用 这 些 现成 便利 的 机 制 ， 而 
不 愿 去 探究 其 中 的 原理 。 








JavaScript 是 一 门 简单 易 用 的 语言 ， 应 用 广泛 ， 同 时 它 的 语言 机 制 又 十 分 复杂 和 微妙 ， 即 
使 经 验 丰富 的 开发 人 员 也 需要 用 心 学 习 才 能 真正 掌握 。 











JavaScript 的 矛盾 之 处 就 在 于 此 ， 它 的 阿 喀 琉 斯 之 唾 正 是 本 书 要 解决 的 问题 。 因 为 无 需 深 
入 理解 就 能 用 它 来 编程 ， 所 以 人 们 常常 放松 对 它 的 学 习 。 




















XI 


使 命 





在 学 习 JavaScript 的 过 程 中 ， 磁 到 令 人 抓 狂 的 问题 或 挫折 时 ， 如 果 置 之 不 理 或 不 求 甚 解 





(就 像 有 些 人 习惯 做 的 那样 ) ， 我 们 很 快 就 会 发 现 自己 根本 无 从 发 挥 这 门 语言 的 威力 。 


尽管 这 些 被 称 为 JavaScript 的 “精华 ”部 分 ， 但 我 司 请 读者 朋友 们 将 其 看 作 “ 容 易 的 ”“ 安 
全 的 ” 或 者 “不 完整 的 ”部 分 。 

“你 不 知道 的 JavaScript” 系 列 丛 书 旨 在 介绍 JavaScript 的 另 一 面 ， 让 你 深入 掌握 JavaScript 
的 全 部 ， 特 别 是 那些 难点 。 


JavaScript 开发 人 员 常 党 满足 于 一 知 半 解 ， 不 愿 更 深入 地 了 解 其 深层 原因 和 运作 方式 ， 本 
书 要 解决 的 正 是 这 个 问题 。 我 们 会 直面 那些 疑难 困惑 ， 绝 不 回避 。 

















我 个 人 不 会 仅仅 满足 于 让 代码 运行 起 来 而 不 明 就 里 ， 你 也 应 该 这 样 。 本 书 中 ， 我 会 逐步 介 
绍 JavaScript 中 那些 不 太 为 人 所 知 的 地 方 ， 最 终 让 你 对 这 门 语言 有 一 个 全 面 的 了 解 。 一 旦 
掌握 了 这 些 知识 ， 那 些 技巧 、 框 架 和 时 泌 术 语 等 都 将 不 在 话 下 。 




















本 系列 丛书 全 面 深入 地 介绍 了 JavaScript 中 常 为 人 误解 和 忽视 的 重要 知识 点 ， 让 你 在 读 完 
之 后 不 论 从 理论 上 还 是 实践 上 都 能 对 这 门 语 言 有 足够 的 信心 。 





目前 你 对 JavaScript 的 了 解 可 能 都 来 自 那 些 自身 就 一 知 半 解 的 “专家 ”， 而 这 仅仅 是 冰山 一 


角 。 





读 完 本 系列 丛书 后 ， 你 将 真正 了 解 这 门 语言 。 现 在 就 让 我 们 踏 上 阅读 寻 知 之 旅 吧 。 





小 结 


JavaScript 是 一 门 优秀 的 语言 。 只 学 其 中 一 部 分 内 容 很 容易 ， 但 是 要 全 面 和 掌握 则 很 难 。 开 
发 人 员 遇 到 困难 时 往往 将 其 归咎 于 语言 本 身 ， 而 不 反省 他 们 自己 对 语言 的 理解 有 多 匮乏 。 
本 系列 丛书 旨 在 解决 这 个 问题 ， 使 读者 能 够 发 自 内 心地 喜欢 上 这 门 语言 。 






































本 书 中 的 很 多 示例 都 假定 你 使 用 的 是 现代 (以 及 未 来 ) 的 JavaScript 引擎 环 
况 ， 比 如 ES6。 有 些 代 码 在 旧版 本 (ES6 之 前 ) 的 引擎 下 可 能 不 会 像 本 书 中 
描述 的 那样 工作 。 








排版 约定 


本 





区 使 用 了 下 列 排 版 约定 。 


楷体 
表示 新 术语 。 





Xll 


| -> 


刚 


Dl 


。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 语 
句 和 关键 字 等 。 





。 加 粗 等 宽 字体 (constant width botLd ) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 


。 等 宽 斜 体 (constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 禁 换 的 文本 。 


该 图 标 表示 提示 或 建议 。 





该 图 标 表 示 一 般 注 记 。 





该 图 标 表示 警告 或 警示 。 





使 用 代码 示例 


补充 材料 (代码 示例 、 练 习 等 ) 可 以 从 https://github.com/getify/You-Dont-Know-JS/tree/ 
master/types%20&%20grammar 和 https://github.com/getify/You-Dont-Know-JS/tree/master/ 
async & performance 下 载 。 


本 书 是 要 帮 你 完成 工作 的 。 一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 你 可 以 把 它 用 在 你 的 程 
序 或 文档 中 。 除 非 你 使 用 了 很 大 一 部 分 代码 ， 否 则 无 需 联系 我 们 获得 许可 。 比 如 ， 用 本 书 
的 几 个 代码 片段 写 一 个 程序 就 无 需 获 得 许可 ， 销 售 或 分 发 O'Reilly 图 书 的 示例 光盘 则 需要 
获得 许可 ， 引 用 本 书 中 的 示例 代码 回答 问题 无 需 获 得 许可 ， 将 书 中 大 量 的 代码 放 到 你 的 产 
品 文档 中 则 需要 获得 许可 。 

我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包括 书 


名 、 作 者 、 出 版 社 和 JSBN， 比 如 : “You Don’t Know JavaScript: Types & Grammar by Kyle 
Simpson (O’Reilly). Copyright 2015 Getify Solutions, Inc., 978-1-491-90419-0 。 























如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范 上 
oreilly.com 与 我 们 联系 。 











Ce 





， 欢 迎 你 通过 permissions@ 


Safari2 Books Online 


Safari Books Online (http:/www.safaribooksonline.com) 是 应 

Safa 有 运 而 生 的 数字 图 书馆 。 它 局 时 以 图 书 和 视频 的 形式 出 版 世界 

Books Online 顶级 技术 和 商务 作家 的 专业 作品 。 技 术 专 家 、 软 件 开 发 人 员 、 

Web 设计 师 、 商 务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问题 、 学 习 和 认证 培训 时 ， 都 将 
Safari Books Online 视 作 获取 资料 的 首选 渠道 。 


























对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策 略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 OReilly Media、Prentice 


Hall Professional、 Addison-Wesley Professional、 Microsoft Press、Sams、Que、Peachpit 














Press、 Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
Redbooks、 Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、 
Jones & Bartlett、Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 


美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 菜 利 技术 咨询 (北京) 有 限 公 司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 第 一 部 分 “类 型 和 语法 ”的 网 站 地 址 是 http://shop.oreilly.com/ 
product/0636920033745.do。 本 书 第 二 部 分 “异步 和 性 能 ”的 网 址 是 http://shop.oreilly.com/ 
product/0636920033752.do。 









































对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮 件 到 : 


bookquestions @oreilly.com 











要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 


http://www.oreilly.com 

















我 们 在 Facebook 的 地 址 : http://facebook.com/oreilly 
请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 : http://www.youtube.com/oreillymedia 
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第 一 部 分 





类 型 和 语法 





有 人 说 ，JavaScript 是 唯一 一 门 可 以 先 用 后 学 的 编程 语言 。 

每 次 听 到 这 话 我 都 会 心 一 笑 ， 因 为 我 自己 就 是 这 样 ， 我 猜 很 多 开发 人 员 可 能 也 是 如 此 。 
JavaScript， 也 许 还 包括 CSS 和 HTML， 在 互联 网 早期 的 大 学 计算 机 课程 中 并 不 是 主流 教 
学 语言 。 初 学 者 大 多 通过 搜索 引擎 和 “查看 源 代码 ”的 方式 来 自学 。 


我 仍然 记得 自己 在 高 中 时 代 开 发 的 第 一 个 网 站 。 那 是 一 个 网 上 商店 。 因 为 是 《007》 的 粉 
丝 ， 所 以 我 决定 创建 一 家 “黄金 眼 ”商店 。 它 应 有 尽 有 ， 背 景 音 乐 是 “黄金 眼 ” 的 主题 
曲 ， 有 一 个 用 JavaScript 开发 的 瞄准 器 在 屏幕 上 跟随 鼠标 移动 ， 并 且 每 次 点 击 鼠 标 就 会 发 
出 一 声 枪 响 。 想 必 Q 〈《007》 中 的 一 个 角色 ) 也 会 为 这 个 杰作 感到 骄傲 吧 。 


之 所 以 讲 到 这 个 故事 ， 是 因为 我 当时 使 用 的 开发 方式 直到 现在 仍然 有 许多 开发 人 员 在 使 
用 ， 那 就 是 “复制 + 粘贴 ”。 在 项 目 中 我 “复制 + 粘贴 ”了 大 量 JavaScript 代码 ， 但 根本 没 
有 真正 理解 它们 。 那 些 十 分 流行 的 JavaScript 工具 库 ， 如 jQuery， 也 在 潜移默化 地 影响 着 
我 们 ， 使 我 们 不 用 再 去 深入 了 解 JavaScript 的 本 质 。 


我 并 不 反对 使 用 JavaScript 工具 库 ， 实 际 上 我 还 是 MooTools JavaScript 团队 的 一 员 。 这 些 工 
具 库 之 所 以 功能 强大 ， 正 是 因为 它们 的 开发 者 理解 这 门 语言 的 本 质 和 优点 ， 并 将 它们 运用 到 
了 极致 。 学 会 使 用 这 些 工 具 库 大 有 神 益 ， 同 时 掌握 这 门 语言 的 基础 知识 仍然 是 十 分 重要 的 。 
现在 有 了 Kyle Simpson 的 “你 不 知道 的 JavaScript” 系 列 从 书 ， 我 们 更 有 理由 好 好 学 习 了 。 
《类 型 和 语法 》 是 该 系列 的 第 三 本 书 ， 它 介绍 了 JavaScript 的 核心 基础 知识 ， 这 些 知识 我 们 
永远 不 可 能 从 “复制 + 粘贴 ”和 JavaScript 工具 库 中 学 到 。 本 书 对 强制 类 型 转换 及 其 隐患 、 
原生 构造 国 数 ， 以 及 JavaScript 的 所 有 基础 知识 ， 都 做 了 详细 的 介绍 ， 并 配 以 示例 代码 。 
同 本 系列 的 其 他 作品 一 样 ，Kyle 的 行文 切中 要 点 ， 没 有 多 余 的 套话 和 修辞 ， 正 是 我 喜欢 的 
技术 书 的 风格 。 


希望 大 家 喜欢 这 本 书 ， 并 能 够 常 读 常 新 。 














































































































David Walsh (http://davidwalsh.name) 
Mozilla 资深 开发 人 员 





大 多 数 开 发 者 认为 ， 像 JavaScript 这 样 的 动态 语言 是 没有 类 型 (type) 的 。 让 我 们 来 看 看 
ES5.1 规范 (http:/www.ecma-international.org/ecma-262/5.1/) 对 此 是 如 何 界定 的 : 

本 规范 中 的 运算 法 则 所 操纵 的 值 均 有 相应 的 类 型 。 本 节 中 定义 了 所 有 可 能 出 现 的 

类 型 。ECMAScript 类 型 又 进一步 细 分 为 语言 类 型 和 规范 类 型 。 

ECMAScript 语言 中 所 有 的 值 都 有 一 个 对 应 的 语言 类 型 。ECMAScript 语言 类 型 包 

括 Undefined、Null、Boolean 、String、Number 和 Object。 
喜欢 强 类 型 (又 称 静 态 类 型 ) 语言 的 人 也 许 会 认为 “类 型 ”一 词 用 在 这 里 不 妥 。“ 类 型 ” 
在 强 类 型 语言 中 的 涵义 要 广 很 多 。 
也 有 人 认为 ，JavaScript 中 的 “类 型 ”应 该 称 为 “标签 ”(tag) 或 者 “ 子 类 型 ”(subtype)。 
本 书 中 ， 我 们 这 样 来 定义 “类 型 ”( 与 规范 类 似 ) : 对 语言 引擎 和 开发 人 员 来 说 ， 类 型 是 值 
的 内 部 特征 ， 它 定义 了 值 的 行为 ， 以 使 其 区 别 于 其 他 值 。 
换 句 话说， 如 果 语 言 引 擎 和 开发 人 员 对 42 (数字 ) 和 "42"” (字符 串 ) 采取 不 同 的 处 理 方 
式 ， 那 就 说 明 它 们 是 不 同 的 类 型 ， 一 个 是 number， 一 个 是 string。 通 党 我 们 对 数字 42 进 
行 数学 运算 ， 而 对 字符 串 "42" 进行 字符 串 操 作 ， 比 如 输出 到 页 面 。 它 们 是 不 同 的 类 型 。 





















































上 述 定义 并 非 完 美 ， 不 过 对 于 本 书 已 经 足够 ,也 和 JavaScript 语言 对 自身 的 描述 一 致 。 


1.1 类 型 
撒 开 学 术 界 对 类 型 定义 的 分 臣 ， 为 什么 说 JavaScript 是 否 有 类 型 也 很 重要 呢 ? 


要 正确 合理 地 进行 类 型 转换 〈 参 见 第 4 章 ) ， 我 们 必须 掌握 JavaScript 中 的 各 个 类 型 及 其 内 
在 行为 。 几 乎 所 有 的 JavaScript 程序 都 会 涉及 某 种 形式 的 强制 类 型 转换 ， 处 理 这 些 情况 时 
我 们 需要 有 充分 的 把 握 和 自信 。 


如 果 要 将 42 作为 string 来 处 理 ， 比 如 获得 其 中 第 二 个 字符 "2"， 就 需要 将 它 从 number 
(强制 类 型 ) 转换 为 string。 

这 看 似 简 单 ， 但 是 强制 类 型 转换 形式 多 样 。 有 些 方式 简明 易 懂 ， 也 很 安全 ， 然 而 稍 不 留 
神 ， 就 会 出 现 意 想不到 的 结果 。 























强制 类 型 转换 是 JavaScript 开发 人 员 最 头疼 的 问题 之 一 ， 它 党 被 诉 病 为 语言 设计 上 的 一 个 
缺陷 ， 太 和 危险， 应 该 束 之 高 净 。 


全 面 掌握 JavaScript 的 类 型 之 后 ， 我 们 旨 在 改变 对 强制 类 型 转换 的 成 见 ， 看 到 它 的 好 处 并 
且 意 识 到 它 的 缺点 被 过 分 硅 大 了 。 现 在 先 让 我 们 来 深入 了 解 一 下 值 和 类 型 。 
1.2 内置 类 型 


JavaScript 有 七 种 内 置 类 型 ; 

















。 空 值 (null) 

。 未 定义 (undefined) 

。 布尔 值 ( boolean) 

。 数字 (number) 

。 字符 串 (string) 

。 对 象 (object) 

。 符号 (synmboL，ES6 中 新 增 ) 





除 对 象 之 外 ， 其 他 统称 为 “基本 类 型 ”。 


我 们 可 以 用 typeof 运算 符 来 查看 值 的 类 型 ， 它 返回 的 是 类 型 的 字符 串 值 。 有 意思 的 是 ， 这 
七 种 类 型 和 它们 的 字符 串 值 并 不 一 一 对 应 : 








typeof Undefined === "undefined"; // true 


typeof true === "boolean";  // true 
typeof 42 === "Number"; // true 
typeof "42" === "string"; // true 
typeof { life: 42 } === "object"; // true 


// ES6 中 新 加 入 的 类 型 
typeof Symbol() === "symbol"; // true 





以 上 六 种 类 型 均 有 同名 的 字符 串 值 与 之 对 应 。 符 号 是 ES6 中 新 加 入 的 类 型 ， 我 们 将 在 第 3 


瘟 中 介绍 。 


你 可 能 注意 到 null 类 型 不 在 此 列 。 它 比较 特殊 ，typeof 对 它 的 处 理 有 问题 : 























typeof nuLL === "object"; // true 


正确 的 返回 结果 应 该 是 "nutt"， 但 这 个 bug 由 来 已 入 ,在 JavaScript 中 已 经 存在 了 将 近 
二 十 年 ， 也 许 永远 也 不 会 修复 ， 因 为 这 牵涉 到 太 多 的 Web 系统 ,“ 修 复 ” 它 会 产生 更 多 的 
bug， 令 许多 系统 无 法 正常 工作 。 


我 们 需要 使 用 复合 条 件 来 检测 nutl 值 的 类 型 ; 

















var a = Null; 


(!a && typeof a === "object"); // true 











null 是 基本 类 型 中 唯一 的 一 个 “ 假 值 ”(falsy 或 者 false-like， 参 见 第 4 章 ) 类 型 ，typeof 
对 它 的 返回 值 为 "object"。 














typeof function a(){ /* .. */ } === "function"; // true 
这 样 看 来 ，function (函数 ) 也 是 JavaScript 的 一 个 内 置 类 型 。 然 而 查阅 规范 就 会 知道 ， 
它 实 际 上 是 object 的 一 个 “ 子 类 型 "*。 具 体 来 说 ， 函 数 是 “可 调用 对 象 ”， 它 有 一 个 内 部 属 
性 [[CaLL]] ， 该 属性 使 其 可 以 被 调用 。 





国 数 不 仅 是 对 象 ， 还 可 以 拥有 属性 。 例 如 : 
function a(b,c) { 
/ss 
} 


函数 对 象 的 Length 属性 是 其 声明 的 参数 的 个 数 : 





a.length; // 2 


因为 该 函数 声明 了 两 个 命名 参数 ，b 和 c， 所 以 其 Length 值 为 2。 





并 
由 


再 来 看 看 数组 。JavaScript 支持 数组 ， 那 么 它 是 否 也 是 一 个 特殊 类 型 ? 
typeof [1,2,3] === "object"; // true 


不 ， 数 组 也 是 对 象 。 确 切 地 说 ， 它 也 是 object 的 一 个 “ 子 类 型 ”( 参 见 第 3 章 ) ， 数 组 的 
元 素 按 数字 顺序 来 进行 索引 (而 非 普 通 像 对 象 那样 通过 字符 串 键 值 )， 其 Length 属性 是 元 
素 的 个 数 。 


1.3” 值 和 类 型 
JavaScript 中 的 变量 是 没有 类 型 的 ， 只 有 值 才 有 。 变 量 可 以 随时 持 有 任何 类 型 的 值 。 


换个 角度 来 理解 就 是 ，JavaScript 不 做 “类 型 强制 ”， 也 就 是 说 ， 语 言 引擎 不 要 求 变量 总 是 
持 有 与 其 初始 值 同 类 型 的 值 。 一 个 变量 可 以 现在 被 赋值 为 字符 串 类 型 值 ， 随 后 又 被 赋值 
数字 类 型 值 。 












































42 的 类 型 为 number， 并 且 无 法 更 改 。 而 "42" 的 类 型 为 string。 数 字 42 可 以 通过 强制 类 型 
转换 (coercion) 为 字符 串 "42" (参见 第 4 章 )。 


在 对 变量 执行 typeof 操作 时 ， 得 到 的 结果 并 不 是 该 变量 的 类 型 ， 而 是 该 变量 持 有 的 值 的 类 
型 ， 因 为 JavaScript 中 的 变量 没有 类 型 。 











var a = 42; 
typeof a; // "number" 


a = true; 
typeof a; // "boolean" 


typeof 运算 符 总 是 会 返回 一 个 字符 串 : 





typeof typeof 42; // "string" 





typeof 42 首先 返回 字符 串 "number"， 然 后 typeof "number" 返回 "string"。 


1.3.1 undefined 和 undeclared 
变量 在 未 持 有 值 的 时 候 为 undefined。 此 时 typeof 返回 "undefined": 














var a; 
typeof a; // "undefined" 


var b = 42; 
var Cc; 


// later 
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ba 


typeof b; // "undefined" 
typeof c; // "undefined" 


大 多 数 开发 者 倾向 于 将 undefined 等 同 于 undeclared (未 声明 ) ， 但 在 JavaScript 中 它们 完全 
是 两 回 事 。 


已 在 作用 域 中 声明 但 还 没有 赋值 的 变量 ， 是 undefined 的 。 相 反 ， 还 没有 在 作用 域 中 声明 
过 的 变量 ， 是 undeclared 的 。 





例如 : 
var a; 


a; // undefined 
b; // ReferenceError: b is not defined 


浏览 器 对 这 类 情 0 上 例 中 ，“b is not defined” 容 易 让 人 误 以 为 是 “b is 
undefined”。 这 里 再 强调 一 人 遍 ，“undefined” 和 “is not defined” 是 两 码 事 。 此 时 如 果 浏 览 器 
报错 成 “b is not found” mae “bis not declared” 会 更 准确 。 














更 让 人 抓 狂 的 是 typeof 处 理 undeclared 变量 的 方式 。 例 如 : 


var a; 
typeof a; // "undefined" 
typeof b; // "undefined" 
对 于 undeclared (或 者 not defined) 变量 ，typeof 照样 返回 "undefined"。 请 注意 虽然 b 是 


一 个 undeclared 变量 , 但 typeof b 并 没有 报错 。 这 是 因为 typeof 有 一 个 特殊 的 安全 防范 
机 制 。 























此 时 typeof 如 果 能 返回 undeclared (而 非 undefined) 的 话 ， 情 况 会 好 很 多 。 


1.3.2 typeof Undeclared 


该 安全 防范 机 制 对 在 浏览 器 中 运行 的 JavaScript 代码 来 说 还 是 很 有 帮助 的 ， 因 为 多 个 脚本 
文件 会 在 共享 的 全 局 命名 空间 中 加 载 变 量 。 








很 多 开发 人 员 认 为 全 局 命名 空间 中 不 应 该 有 变量 存在 ， 所 有 东西 都 应 该 被 封 
装 到 模块 和 私有 /独立 的 命名 空间 中 。 理 论 上 这 样 没 错 ， 却 不 切实 际 。 然 而 
这 仍 不 失 为 一 个 值得 为 之 努力 奋斗 的 目标 。 好 在 ES6 中 加 入 了 对 模块 的 支 
持 ， 这 使 我 们 又 向 目标 迈 近 了 一 步 。 

















冰 
由 
TT 











举 个 简单 的 例子 ， 在 程序 中 使 用 全 局 变量 DEBUG 作为 “调试 模式 ”的 开关 。 在 输出 调试 信 
息 到 控制 台 之 前 ， 我 们 会 检查 DEBUG 变量 是 否 已 被 声明 。 顶 层 的 全 局 变量 声明 var DEBUG = 
true 只 在 debug.js 文件 中 才 有 ， 而 该 文件 只 在 开发 和 测试 时 才 被 加 载 到 训 览 器 ， 在 生产 环 
弹 中 不 予 加 载 。 


问题 是 如 何在 程序 中 检查 全 局 变量 DEBUG 才 不 会 出 现 ReferenceError 错误 。 这 时 typeof 的 
安全 防范 机 制 就 成 了 我 们 的 好 帮手 : 

















// 这 样 会 抛 出 错误 
if (DEBUG) { 
console.log( "Debugging is starting" ); 


} 

// 这 样 是 安全 的 

if (typeof DEBUG !== "undefined") { 
console.log( "Debugging is starting" ); 

} 


这 不 仅 对 用 户 定义 的 变量 (比如 DEBUG) 有 用 ， 对 内 建 的 API 也 有 帮助 : 


if (typeof atob === "undefined") { 
atob = function() { /*..*/ }; 
} 


如 果 要 为 某 个 缺失 的 功能 写 polyfll 〈《 即 衬 垫 代码 或 者 补充 代码 ， 用 来 补充 
当前 运行 环境 中 缺失 的 功能 )， 一般 不 会 用 var atob 来 声明 变量 atob。 如 
果 在 if 语句 中 使 用 var atob， 声 明 会 被 提升 (hoisted， 参 见 《 你 不 知道 的 
JavaScript (上 卷 )》' 中 的 “作用 域 和 闲 包 ” 部 分 ) 到 作用 域 〈 即 当前 脚本 或 
函数 的 作用 域 ) 的 最 顶层 ， 即 使 if 条 件 不 成 立 也 是 如 此 (因为 atob 全 局 变 
量 已 经 存在 )。 在 有 些 浏 览 器 中 ， 对 于 一 些 特殊 的 内 建 全 局 变量 (通常 称 为 
“宿主 对 象 ”，host object) ， 这 样 的 重复 声明 会 报错 。 去 掉 var 则 可 以 防止 声 
明 被 提升 。 





还 有 一 种 不 用 通过 typeof 的 安全 防范 机 制 的 方法 ， 就 是 检查 所 有 全 局 变量 是 否 是 全 局 对 象 
的 属性 ， 浏 览 器 中 的 全 局 对 象 是 window。 所 以 前 面 的 例子 也 可 以 这 样 来 实现 : 








if (window.DEBUG) { 
fs 
} 


if (!window.atob) { 
//.. 
} 
































注 1: 此 书 已 由 人 民 邮 电 出 版 社 出 版 。 一 一 编者 注 
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与 undeclared 变量 不 同 ， 访 问 不 存在 的 对 象 属性 (其 至 是 在 全 局 对 象 window 上 ) 不 会 产生 


ReferenceError 错误 。 





一 些 开发 人 员 不 喜欢 通过 window 来 访问 全 局 对 象 ， 尤 其 当代 码 需要 运行 在 多 种 JavaScript 
环境 中 时 (不 仅仅 是 浏览 器 ， 还 有 服务 器 端 ， 如 node.js 等 )， 因 为 此 时 全 局 对 象 并 非 总 是 


window。 





从 技术 角度 来 说 ，typeof 的 安全 防范 机 制 对 于 非 全 局 变量 也 很 管用 ， 虽 然 这 种 情况 并 不 多 
见 ， 也 有 一 些 开发 人 员 不 大 愿意 这 样 做 。 如 果 想 让 别人 在 他 们 的 程序 或 模块 中 复制 粘贴 你 
的 代码 ， 就 需要 检查 你 用 到 的 变量 是 否 已 经 在 宿主 程序 中 定义 过 : 








function doSomethingCool() { 
var helper = 
(typeof FeatureXYZ !== "undefined") ? 
FeatureXYZ : 
function() { /*.. default feature ..*/ }; 


var val = helper(); 
人 
} 
其 他 模块 和 程序 引入 doSomethingCool() 时 ，doSsomethingCootL() 会 检查 FeatureXYz 变量 是 
否 已 经 在 宿主 程序 中 定义 过 ; 如 果 是 ， 就 用 现成 的 ， 否 则 就 自己 定义 : 






































// 一 个 立即 执行 函数 表达 式 (IIFE ,参见 《你 不 知道 的 JavaScript( 上 卷 )》“ 作 用 域 和 闭 包 ” 
// 部 分 的 3.3.2 节 ) 
(function(){ 

function FeatureXYZ() { /*.. my XYZ feature ..*/ } 


// 包含 doSomethingCool(..) 
function doSomethingCool() { 
var helper = 
(typeof FeatureXYZ !== "undefined") ? 
FeatureXYZ : 
function() { /*.. default feature ..*/ }; 


var val = helper(); 


人/ 
} 
doSomethingCool(); 
])(); 


这 里 ，FeatureXYz 并 不 是 一 个 全 局 变量 ， 但 我 们 还 是 可 以 使 用 typeof 的 安全 防范 机 制 来 做 
检查 ， 因 为 这 里 没有 全 局 对 象 可 用 〈 像 前 面 提 到 的 window.__)。 








还 有 一 些 人 喜欢 使 用 “依赖 注入 ” (dependency injection) 设计 模式 ， 就 是 将 依赖 通过 参数 
显 式 地 传递 到 函数 中 ， 如 : 





function doSomethingCooL(FeatureXYZ) { 
var helper = FeatureXYz || 
function() { /*.. default feature ..*/ }; 
var val = helper(); 


//.. 


上 述 种 种 选择 和 方法 各 有 利弊 。 好 在 typeof 的 安全 防范 机 制 为 我 们 提供 了 更 多 选择 。 








1.4 小结 


JavaScript 有 七 种 内 置 类 型 : null、undefined、boolean、number、string、object 和 
symbol， 可 以 使 用 typeof 运算 符 来 查看 。 





变量 没有 类 型 ， 但 它们 持 有 的 值 有 类 型 。 类 型 定义 了 值 的 行为 特征 。 














很 多 开发 人 员 将 undefined 和 undeclared 混为一谈 ， 但 在 JavaScript 中 它们 是 两 码 事 。 
undefined 是 值 的 一 种 。undeclared 则 表示 变量 还 没有 被 声明 过 。 


遗憾 的 是 ，JavaScript 却 将 它们 混为一谈 ， 在 我 们 试图 访问 "undeclared" 变量 时 这 样 报 
错 : ReferenceError: a is not defined， 并 有 是 typeof 对 undefined 和 undeclared 变量 都 返回 


"undef ined", 

















然而 ， 通 过 typeof 的 安全 防范 机 制 〈 阻 止 报错 ) 来 检查 undeclared 变量 ， 有 时 是 个 不 错 的 
办 法 。 








值 





数组 (array)、 字 符 串 (string) 和 数字 (number) 是 一 个 程序 最 基本 的 组 成 部 分 ， 但 在 
JavaScript 中 ， 它 们 可 谓 让 人 喜 忧 挨 半 。 

















本 章 将 介绍 JavaScript 中 的 几 个 内 置 值 类 型 ， 让 读者 深入 了 解 和 合理 运用 它们 。 








2.1 数组 


和 其 他 强 类 型 语言 不 同 ， 在 JavaScript 中 ， 数 组 可 以 容纳 任何 类 型 的 值 ， 可 以 是 字符 串 、 
数字 、 对 象 (object)， 甚 至 是 其 他 数组 〈 多 维 数组 就 是 通过 这 种 方式 来 实现 的 ) : 

















var a=[ 1, "2", [3] ]; 


a. length; 六 /名 
a[0] === 1; // true 
a[2][0] === 3; // true 


对 数组 声明 后 即 可 向 其 中 加 入 值 ， 不 需要 预先 设 定 大 小 (参见 3.4.1 节 ) : 
vara= [ ]， 


a.length;  // 0 


a[0] = 1; 
a[1] = "2"; 
a[2] = [3]; 


a.length; //3 











使 用 delete 运算 符 可 以 将 单元 从 数组 中 删除 ， 但 是 请 注意 ， 单 元 删除 后 ， 数 
组 的 Length 属性 并 不 会 发 生变 化 。 第 5 章 将 详细 介绍 delete 运算 符 。 











在 创建 “ 稀 路 ”数组 (sparse array， 即 含有 空白 或 空缺 单元 的 数组 ) 时 要 特别 注意 : 

var a= [|]; 

a[0] = 1; 

// 此 处 没有 设置 a[1] 单 元 

aL2] = [3 

a[1]; // undefined 

a.length;  // 3 
上 面 的 代码 可 以 正常 运行 ， 但 其 中 的 “空白 单元 ”(empty slot) 可 能 会 导致 出 人 意料 的 结 
果 。a[1] 的 值 为 undefined， 但 这 与 将 其 显 式 赋值 为 undefined (a[1] = undefined) 还 是 
有 所 区 别 。 详 情 请 参见 3.4.1 市 。 
数组 通过 数字 进行 索引 ， 但 有 趣 的 是 它们 也 是 对 象 ， 所 以 也 可 以 包含 字符 串 键 值 和 属性 
(但 这 些 并 不 计算 在 数组 长 度 内 ) : 








var a= [|]; 


a[0] = 1; 
a[ "foobar"] = 2; 


a. Length; //1 
a["foobar"]; // 2 
a.foobar; // 2 


这 里 有 个 问题 需要 特别 注意 ， 如 果 字 符 串 键 值 能 够 被 强制 类 型 转换 为 十 进 制 数字 的 话 ， 它 
就 会 被 当 作 数字 索引 来 处 理 。 

var a= [|]; 

a["13"] = 42; 


a.length; // 14 


在 数组 中 加 入 字符 串 键 值 / 属性 并 不 是 一 个 好 主意 。 建 议 使 用 对 象 来 存放 键 值 / 属性 值 ， 
用 数组 来 存放 数字 索引 值 。 


类 数组 


有 时 需要 将 类 数组 〈 一 组 通过 数字 索引 的 值 ) 转换 为 真正 的 数组 ， 这 一 般 通 过 数组 工具 函 
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数 (如 indexof(..)、concat(..)、forEach(..) 等 ) 来 实现 。 


例如 ， 一 些 DOM 查询 操作 会 返回 DOM 元 素 列 表 ， 它 们 并 非 真 正 意义 上 的 数组 ， 但 十 分 
类 似 。 另 一 个 例子 是 通过 arguments 对 象 ( 类 数组 ) 将 函数 的 参数 当 作 列 表 来 访问 (从 
ES6 开始 已 废止 )。 











工具 函数 slice(..) 经 常 被 用 于 这 类 转换 : 
function foo() { 
var arr = Array.prototype.slice.call( arguments ); 
arr.push( "bam" ); 


console.log( arr ); 


} 


foo( "bar", "baz" ); // ["bar","baz","bam"] 
如 上 所 示 ，sLice() 返回 参数 列表 (上 例 中 是 一 个 类 数组 ) 的 一 个 数组 复 本 。 
用 ES6 中 的 内 置 工具 函数 Array.from(..) 也 能 实现 同样 的 功能 : 


var arr = Array.from( arguments ); 


Array.from(..) 有 一 些 非常 强大 的 功能 ， 将 在 本 系列 的 《你 不 知道 的 
JavaScript (下 卷 )》 的 “ES6 & Beyond” 部 分 详细 介绍 。 








2.2 ”字符 串 


字符 串 经 常 被 当成 字符 数组 。 字 符 串 的 内 部 实现 究竟 有 没有 使 用 数组 并 不 好 说 ， 但 
JavaScript 中 的 字符 串 和 字符 数组 并 不 是 一 回 事 ， 最 多 只 是 看 上 去 相似 而 已 。 


例如 下 面 两 个 值 : 




















var a = "foo"; 
Var b 各 有 





字符 串 和 数组 的 确 很 相似 ， 它 们 都 是 类 数组 ， 都 有 Length 属性 以 及 indexof(..) (从 ES5 
开始 数组 支持 此 方法 ) 和 concat(..) 方 法: 


[source,js] 
a. length; // 3 
b. length; /1:3 
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a.indexof( "o" ); ff: 


b.indexof( "o" ); /rt 

var C = a.concat( "bar" ); // "foobar" 

var d = b.concat( [ba rE] ); // Ef 0 0 "bs a FE] 
a === C; // false 

b === d; // false 

a; // *foo" 

Bb A [Om 0] 


但 这 并 不 意味 着 它们 都 是 “字符 数组 ”， 比 如 : 


a[1] 
b[1] 


"0"; 
"0"; 


a; // "foo" 
A a 





JavaScript 中 字符 串 是 不 可 变 的 ， 而 数组 是 可 变 的 。 才 


法 语法 ， 在 老 版 本 的 卫 中 就 不 被 允许 (现在 可 以 了 )。 














F 且 a[1] 在 JavaScript 中 并 非 总 是 合 





正确 的 方法 应 该 是 a.charAt(1)。 


字符 串 不 可 变 是 指 字符 串 的 成 员 函数 不 会 改变 其 原始 值 ， 而 是 创建 并 返回 一 个 新 的 字符 








串 。 而 数组 的 成 员 函 数 都 是 在 其 原始 值 上 进行 操作 。 





Cc = a.toUpperCase(); 
EC // false 


a; // "foo" 

Cs // "FOO" 

b.push( "!" ); 

b; yd [" fr "0"y"0","1"] 








许多 数组 函数 用 来 处 理 字符 串 很 方便 。 虽 然 字 符 串 没有 这 些 函 数 ， 但 可 以 通过 “借用 ” 数 


组 的 非 变 更 方法 来 处 理 字符 串 : 


a.join; // undefined 

a.map; // undefined 

var C = Array.prototype.join.call( a, "-" ); 

var d = Array.prototype.map.call( a, function(v){ 
return v.toUpperCase() + "."; 

} ).join( "" ); 

Cc; // "f-o-o" 

d; FEE.008 








另 一 个 不 同 点 在 于 字符 串 反 转 (JavaScript 面试 常见 问题 )。 数 组 有 一 个 字符 串 疫 有 的 可 变 








更 成 员 函 数 reverse(): 
a.reverse; // undefined 


b.reverse(); J oO sf 
b; BO 


可 惜 我 们 无 法 “借用 ”数组 的 可 变更 成 员 函 数 ， 因 为 字符 串 是 不 可 变 的 : 





Array.prototype.reverse.call( a ); 


// 返回 值 仍然 是 字符 串 "foo" 的 一 个 封装 对 象 (参见 第 3 章 ) :( 


一 个 变通 (破解 ) 的 办 法 是 先 将 字符 串 转 换 为 数组 ， 待 处 理 完 后 再 将 结果 转换 回 字 符 串 : 









































var C = a 
// 将 a 的 值 转换 为 字符 数组 
.split( "" ) 
// 将 数组 中 的 字符 进行 倒转 
.reverse() 
// 将 数组 中 的 字符 拼接 回 字 符 中 
.join( "" ); 

c; // "oof" 





这 种 方法 的 确 简单 粗暴 ， 但 对 简单 的 字符 串 却 完 全 适用 。 


请 广 意 ! 上 述 方法 对 于 包含 复杂 字符 〈Unicode， 如 星 号 、 多 字 节 字符 等 ) 的 
字符 串 并 不 适用 。 这 时 则 需要 功能 更 加 完备 、 能 够 处 理 Unicode 的 工具 库 。 
可 以 参考 Mathias Bynen 的 Esrever (https:/Wgithub.com/mathiasbynents/esrever) 。 








如 果 需 要 经 常 以 字符 数组 的 方式 来 处 理 字符 串 的 话 ， 倒 不 如 直接 使 用 数组 。 这 样 就 不 用 在 
字符 串 和 数组 之 间 来 回 折腾 。 可 以 在 需要 时 使 用 join("") 将 字符 数组 转换 为 字符 串 。 


2.3 ”数字 

JavaScript 只 有 一 种 数值 类 型 : number (数字 )， 包 括 “整数 ”和 带 小 数 的 十 进 制 数 。 此 处 
“整数 ”之 所 以 加 引号 是 因为 和 甚 他 语言 不 同 ，JavaScript 没有 真正 意义 上 的 整数 ， 这 也 是 
它 一 直 以 来 为 人 诉 病 的 地 方 。 这 种 情况 在 将 来 或 许 会 有 所 改观 ， 但 目前 只 有 数字 类 型 。 
JavaScript 中 的 “整数 ”就 是 没有 小 数 的 十 进 制 数 。 所 以 42.9 即 等 同 于 “整数 ”42。 

与 大 部 分 现代 编程 语言 (包括 几乎 所 有 的 脚本 语言 ) 一 样 ，JavaScript 中 的 数字 类 型 是 基 
于 IEEE 754 标准 来 实现 的 ， 该 标准 通常 也 被 称 为 “ 浮 点 数 "。JavaScript 使 用 的 是 “ 双 精 
度 ” 格 式 ( 即 64 位 二 进 制 ) 。 
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CR 
人 并 非 一 定 要 了 解数 位 (bit) 在 内 存 中 的 存储 
- 所 以 本 书 对 此 不 多 作 介 绍 ， 有 兴趣 的 读者 可 以 参见 IEEE 754 的 相关 细节 。 


2.3.1 数字 的 语法 


JavaScript 中 的 数字 常量 一 般 用 十 进 制 表 示 。 例 如 : 














var a = 42; 
var b = 42.3; 





数字 前 面 的 0 可 以 省 略 : 











var a = 0.42; 
var b = .42; 





小 数 点 后 小 数 部 分 最 后 面 的 6 也 可 以 省 略 : 











var a = 42.0; 
var b = 42.; 


42. 这 种 写法 没 问 题 ， 只 是 不 常见 ， 但 从 代码 的 可 读 性 考虑 ， 不 建议 这 样 写 。 


默认 情况 下 大 部 分 数字 都 以 十 进 制 显示 ， 小 数 部 分 最 后 面 的 9 被 省 略 ， 如 : 


特别 大 和 特别 小 的 数字 默认 用 指数 格式 显示 ， 与 toExponential() 函数 的 输出 结果 相同 。 
例如 : 

var a = SE10; 

a; // 50000000000 

a.toExponential(); // "5e+10" 


var b=a* al 
b; // 2.5e+21 


var C=1/ ai 
Cs // 2e-11 


由 于 数字 值 可 以 使 用 Number 对 象 进行 封装 (参见 第 3 章 )， 因 此 数字 值 可 以 调用 Number. 
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prototype 中 的 方法 (参见 第 3 章 ) 。 例 如 ，tofixed(.. ) 方法 可 指定 小 数 部 分 的 显示 位 数 : 
var a = 42.59; 


a.toFixed( 0 ); // "43" 
a.toFixed( 1 ); // "42.6" 
a.toFixed( 2 ); // "42.59" 
a.toFixed( 3 ); // "42.590" 
a.toFixed( 4 ); // "42.5900" 





请 注意 ， 上 例 中 的 输出 结果 实际 上 是 给 定数 字 的 字符 串 形式 ， 如 果 指 定 的 小 数 部 分 的 显示 
位 数 多 于 实际 位 数 就 用 9 补 齐 。 


toprecision(..) 方 法 用 来 指定 有 效 数位 的 显示 位 数 : 
var a = 42.59; 


.toprecision( 1 ); // "4e+1" 
toPrecision( 2 ); // "43" 
toPrecision( 3 ); // "42.6" 
topPrecision( 4 ); // "42.59" 
toPrecision( 5 ); // "42.590" 
.toprecision( 6 ); // "42.5900" 


[| 


上 面 的 方法 不 仅 适用 于 数字 变量 ， 也 适用 于 数字 常量 。 不 过 对 于 . 运算 符 需要 给 予 特别 注 
意 ， 因 为 它 是 一 个 有 效 的 数字 字符 ， 会 被 优先 识别 为 数字 常量 的 一 部 分 ， 然 后 才 是 对 象 属 
性 访问 运算 符 。 


// 无 效 语法 : 
42.toFixed( 3 ); // SyntaxError 





// 下 面 的 语法 都 有 效 : 

(42).toFixed( 3 ); // "42.000" 
0.42.toFixed( 3 ); // "0.420" 
42..toFixed( 3 );  // "42.000" 


42.tofixed(3) 是 无 效 语法 ， 因 为 . 被 视 为 常量 42. 的 一 部 分 (如 前 所 述 )， 所 以 没有 . 属 
性 访问 运算 符 来 调用 tofixed 方法 。 
42..tofixed(3) 则 没有 问题 ， 因 为 第 一 个 . 被 视 为 number 的 一 部 分 ， 第 二 个 . 是 属性 访问 
运算 符 。 只 是 这 样 看 着 奇怪 ， 实 际 情况 中 也 很 少见 。 在 基本 类 型 值 上 直接 调用 的 方法 并 不 
多 见 ， 不 过 这 并 不 代表 不 好 或 不 对 。 





一 些 工 具 库 扩展 了 Number.prototype 的 内 置 方法 (参见 第 3 章 ) 以 提供 更 
多 的 数值 操作 ， 比 如 用 19. .makeItRain() 方法 来 实现 十 秒 钟 金 钱 雨 动画 等 
效果 。 
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押 的 语法 也 是 有 效 的 请 注意 其 中 的 空格 ) : 


村 











42 .toFixed(3); // "42.000" 





然而 对 数字 常量 而 言 ， 这 样 的 语法 很 容易 引起 误会 ， 不 建议 使 用 。 
我 们 还 可 以 用 指数 形式 来 表示 较 大 的 数字 ， 如 : 


var onethousand = 1E3; // 即 1* 10^3 
var onemilliononehundredthousand = 1.1E6; // 即 1.1 * 10^6 


数字 常量 还 可 以 用 其 他 格式 来 表示 ， 如 二 进 制 、 八 进 制 和 十 六 进 制 。 





当前 的 JavaScript 版 本 都 支持 这 些 格式 : 


0xf3; // 243 的 十 六 进 表 
oxf3; // 同上 





1 


0363; // 243 的 八进制 


从 ES6 开始 ， 严 格 模式 (strict mode) 不 再 支持 0363 八进制 格式 (新 格式 如 
下 )。9363 格式 在 非 严格 模式 (non-strict mode) 中 仍然 受 支持 ， 但 是 考虑 到 
将 来 的 兼容 性 ， 最 好 不 要 再 使 用 (我们 现在 使 用 的 应 该 是 严格 模式 )。 


ES6 支持 以 下 新 格式 : 
00363; // 243 的 八进制 
00363; // 同上 


gb11110011; // 243 的 二 进 制 
0B11110011; // 同上 








考虑 到 代码 的 易 读 性 ， 不 推荐 使 用 60363 格式 ， 因 为 6 和 大 写字 母 0 在 一 起 容易 混淆 。 





议 尽 量 使 用 小 写 的 0x、0b 和 9o。 


2.3.2” 较 小 的 数值 


二 进 制 浮 点 数 最 大 的 问题 (不 仅 JavaScript， 所 有 遵循 IEEE 754 规范 的 语言 都 是 如 此 )， 


会 出 现 如 下 情况 : 
0.1 + 0.2 === 0.3; // false 


从 数学 角度 来 说 ， 上 面 的 条 件 判断 应 该 为 true， 可 结果 为 什么 是 false 呢 ? 


简单 来 说 ， 二 进 制 浮 点 数 中 的 9.1 和 9.2 并 不 是 十 分 精确 ， 它 们 相 加 的 结果 并 非 刚好 等 


0.3， 而 是 一 个 比较 接近 的 数字 6.360060000600060064， 所 以 条 件 判断 结果 为 false。 





建 


日 
丰 


于 
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有 人 认为 ，JavaScript 应 该 采用 一 种 可 以 精确 呈现 数字 的 实现 方式 。 一 直 以 
来 出 现 过 很 多 替代 方案 ， 只 是 都 没 能 成 为 标准 ， 以 后 大 概 也 不 会 。 这 个 问题 
看 似 简 单 ， 实 则 不 然 ， 否 则 早 就 解决 了 。 











问题 是 ， 如 果 一 些 数字 无 法 做 到 完全 精确 ， 是 否 意味 着 数字 类 型 这 无 用 处 呢 ? 答案 当然 是 
否定 的 。 

在 处 理 带 有 小 数 的 数字 时 需要 特别 注意 。 很 多 (也 许 是 绝 大 多 数 ) 程序 只 需要 处 理 整 数 ， 
最 大 不 超过 百 万 或 者 万 亿 ， 此 时 使 用 JavaScript 的 数字 类 型 是 绝对 安全 的 。 





那么 应 该 怎样 来 判断 0.1 + 90.2 和 9.3 是 否 相 等 呢 ? 





最 常见 的 方法 是 设置 一 个 误差 范围 值 ， 通 常 称 为 “机 器 精度 ”(machine epsilon) ， 对 
JavaScript 的 数字 来 说 ， 这 个 值 通常 是 2^-52 (2.220446049250313e-16 ) 。 














从 ES6 开始 ， 该 值 定义 在 Number .EPSILON 中 ， 我 们 可 以 直接 拿 来 用 ， 也 可 以 为 ES6 之 前 
的 版 本 写 polyfill: 
if (!Number .EPSILON) { 
Number .EPSILON = Math.pow(2,-52); 
} 


可 以 使 用 Number .EPSILON 来 比较 两 个 数字 是 否 相 等 (在 指定 的 误差 范围 内 ) : 





function numbersCloseEnoughToEqual(n1,n2) { 
return Math.abs( n1 - n2 ) < Number .EPSILON; 


} 

Var a = 01 + 0.2; 

var b = 0.3; 

numbersCLoseEnoughToEquaL( a, b ); // true 


numbersCLoseEnoughToEquaL( 0.0000001, 0.0000002 ); // false 
能 够 呈现 的 最 大 浮 点 数 大 约 是 1.798e+368 (这 是 一 个 相当 大 的 数字 )， 它 定义 在 Number. 
MAX_VALUE 中 。 最 小 浮 点 数 定义 在 Number.MIN_VALUE 中 ， 大 约 是 5e-324， 它 不 是 负数 ， 但 
无 限 接 近 于 0 1 


下 rm | m= 

2.3.3 ”整数 的 安全 范围 

数字 的 呈现 方式 决定 了 “整数 ”的 安全 值 范 围 远 远 小 于 Number .MAX_VALUE。 

能 够 被 “安全 ”呈现 的 最 大 整数 是 2^53 - 1， 即 9997199254746991， 在 ES6 中 被 定义 为 
Number .MAX_SAFE_INTEGER。 最 小 整数 是 -99071992547460991， 在 ES6 中 被 定义 为 Number. 
MIN_SAFE_INTEGER 。 
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有 时 JavaScript 程序 需要 处 理 一 些 比较 大 的 数字 ， 如 数据 库 中 的 64 位 ID 等 。 由 于 
JavaScript 的 数字 类 型 无 法 精确 呈现 64 位 数值 ， 所 以 必须 将 它们 保存 (转换 ) 为 字符 串 。 


好 在 大 数值 操作 并 不 常见 (它们 的 比较 操作 可 以 通过 字符 串 来 实现 )。 如 果 确 实 需要 对 大 
数值 进行 数学 运算 ， 目 前 还 是 需要 借助 相关 的 工具 库 。 将 来 JavaScript 也 许 会 加 入 对 大 数 
值 的 支持 。 




















2.3.4 整数 检测 
要 检测 一 个 值 是 否 是 整数 ， 可 以 使 用 ES6 中 的 Number .isInteger(..) 方法: 
Number .isInteger( 42 ); // true 


Number .isInteger( 42.000 ); // true 
Number .isInteger( 42.3 ); // false 


也 可 以 为 ES6 之 前 的 版 本 polyfill Number .isInteger(..) 方法 : 


if (!Number .isInteger) { 
Number .isInteger = function(num) { 
return typeof num == "number" && num % 1 == 0; 
}; 
} 


要 检测 一 个 值 是 否 是 安全 的 整数 ， 可 以 使 用 ES6 中 的 Number .isSafeInteger(..) 方 法 : 


Number .isSafeInteger( Number .MAX_SAFE_INTEGER ); // true 
Number .isSafeInteger( Math.pow( 2, 53 ) ); // false 
Number .isSafeInteger( Math.pow( 2, 53 ) - 1 ); // true 


可 以 为 ES6 之 前 的 版 本 polyfill Number.isSafeInteger(..) 方法 : 


if (!Number.isSafeInteger) { 
Number .isSafeInteger = function(num) { 
return Number.isInteger( num ) && 
Math.abs( num ) <= Number .MAX_SAFE_INTEGER ; 
}; 


2.3.5 ”32 位 有 符号 整数 

虽然 整数 最 大 能 够 达到 53 位 ， 但 是 有 些 数字 操作 (如 数位 操作 ) 只 适用 于 32 位 数字 ， 
所 以 这 些 操 作 中 数字 的 安全 范围 就 要 小 很 多 ， 变 成 从 Math.pow(-2,31) (-2147483648 ， 
约 -21 亿 ) 到 Math.pow(2,31) - 1 (2147483647， 约 21 亿 )。 








a | 96 可 以 将 变量 a 中 的 数值 转换 为 32 位 有 符号 整数 ， 因 为 数位 运算 符 | 只 适用 于 32 位 
整数 〈 它 只 关心 32 位 以 内 的 值 ， 其 他 的 数位 将 被 名 略 )。 因 此 与 9 进行 操作 即 可 截取 a 中 
的 32 位 数位 。 
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某 些 特殊 的 值 并 不 是 32 位 安全 范围 的 ， 如 NaN 和 Infinity (下 节 将 作 相关 
介绍 ) ， 此 时 会 对 它们 执行 虚拟 操作 (abstract operation) ToInt32 (参见 第 4 
章 ) ， 以 便 转 换 为 符合 数位 运算 符 要 求 的 +9 值 。 


2.4 ”特殊 数值 


JavaScript 数据 类 型 中 有 几 个 特殊 的 值 需要 开发 人 员 特 别 注意 和 小 心 使 用 。 


2.4.1 不 是 值 的 值 
undefined 类 型 只 有 一 个 值 ， 即 undefined。null 类 型 也 只 有 一 个 值 ， 即 nuLL。 它 们 的 名 
称 既是 类 型 也 是 值 。 








undefined 和 null 常 被 用 来 表示 “ 空 的 ” 值 或 “不 是 值 ”的 值 。 二 者 之 间 有 一 些 细微 的 差 
别 。 例 如 : 


。 null 指 空 值 (empty value) 


。 undefined 指 没有 值 (missing value) 
或 者 : 


。 undefined 指 从 未 赋值 
。 null 指 曾 赋 过 值 ， 但 是 目前 没有 值 


null 是 一 个 特殊 关键 字 ， 不 是 标识 符 ， 我 们 不 能 将 其 当 作 变量 来 使 用 和 赋值 。 然 而 
undefined 却 是 一 个 标识 符 ， 可 以 被 当 作 变 量 来 使 用 和 赋值 。 





2.4.2 _ undefined 
在 非 严 格 模式 下 ， 我 们 可 以 为 全 局 标识 符 undefined 赋值 (这 样 的 设计 实在 是 欠 考 虑 ! ) : 








function foo() { 
undefined = 2; // 非常 糟糕 的 做 法 ! 
} 


foo(); 
function foo() { 
"Use strict"; 


undefined = 2; // TypeError! 
} 


foo(); 
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在 非 严 格 和 严格 两 种 模式 下 ， 我 们 可 以 声明 一 个 名 为 undefined 的 局 部 变量 。 再 次 强调 最 


好 不 要 这 样 做 ! 
function foo() { 
"Use strict"; 
var undefined = 2; 


console.log( undefined ); // 2 
} 


foo(); 
永远 不 要 重新 定义 undefined。 


void 运算 符 





undefined 是 一 个 内 置 标识 符 〈 除 非 被 重新 定义 ， 见 前 面 的 介绍 )， 它 的 值 为 undefined， 














通过 void 运算 符 即 可 得 到 该 值 。 











表达 式 void _” 没有 返回 值 ， 因 此 返回 结果 是 undefined。void 并 不 改变 表达 式 的 结果 ， 











只 是 让 表达 式 不 返回 值 ; 
var a = 42; 


console.log( void a, a ); // undefined 42 


按 惯例 我 们 用 void 6 来 获得 undefined (这 主要 源 自 C 语言 ， 


a 























然 使 用 void true 或 其 他 


void 表达 式 也 是 可 以 的 )。void 9、void 1 和 undefined 之 间 并 没有 实质 上 的 区 别 。 
void 运算 符 在 其 他 地 方 也 能 派 上 用 场 ， 比 如 不 让 表达 式 返回 任何 结果 (即使 其 有 副作用 )。 





例如 : 


function doSomething() { 
// 注 : APP.ready 由 程序 自己 定义 
if (!APP.ready) { 
// 稍 后 再 试 


return void setTimeout( doSomething,100 ); 





} 


var result; 





// 其 他 
return result; 


} 


// 现在 可 以 了 吗 ? 
if (doSomething()) { 
// 立即 执行 下 一 个 任务 








3 




















这 里 setTimeout(..) 函数 返回 一 个 数值 (计时 器 间隔 的 唯一 标识 符 ， 用 来 取消 计时 )， 但 
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是 为 了 确保 if 语句 不 产生 误 报 (false positive) ， 我 们 要 void 掉 它 。 
很 多 开发 人 员 喜 欢 分 开 操作 ， 效 果 都 一 样 ， 只 是 没有 使 用 void 运算 符 : 

















if (!APP.ready) { 
// 稍 后 再 试 
setTimeout( doSomething,100 ); 
return; 

















} 


总 之 ， 如 果 要 将 代码 中 的 值 (如 表达 式 的 返回 值 ) 设 为 undefined， 就 可 以 使 用 void。 这 
种 做 法 并 不 多 见 ， 但 在 某 些 情况 下 却 很 有 用 。 


2.4.3 ”特殊 的 数字 

数字 类 型 中 有 几 个 特殊 的 值 ， 下 面 将 详细 介绍 。 

1. 不 是 数字 的 数字 

如 果 数 学 运算 的 操作 数 不 是 数字 类 型 (或 者 无 法 解析 为 常规 的 十 进 制 或 十 六 进 制 数字 ) ， 
就 无 法 返回 一 个 有 效 的 数字 ， 这 种 情况 下 返回 值 为 NaN。 

































































NaN 意 指 “不 是 一 个 数字 ”(not a number) ， 这 个 名 字 容 易 引起 误会 ， 后 面 将 会 提 到 。 将 它 
理解 为 “无 效 数 值 ” “失败 数值 ”或 者 “ 坏 数值 ”可 能 更 准确 些 。 


例如 : 











var a = 2 / "foo"; // NaN 
typeof a === "number"; // true 
换 句 话说 ,“ 不 是 数字 的 数字 ”仍然 是 数字 类 型 。 这 种 说 法 可 能 有 点 绕 。 
NaN 是 一 个 “警戒 值 ”(sentinel value， 有 特殊 用 途 的 常规 值 )， 用 于 指出 数字 类 型 中 的 错误 
情况 ， 即 “执行 数学 运算 没有 成 功 ， 这 是 失败 后 返回 的 结果 ”。 


有 人 也 许 认为 如 果 要 检查 变量 的 值 是 否 为 NaN， 可 以 直接 和 NaN 进行 比较 ， 就 像 比较 nutl 
和 undefined 那样 。 实 则 不 然 。 









































var a=2/ "foo"; 


a == NaN;  // false 
a === NaN; // false 


NaN 是 一 个 特殊 值 ， 它 和 自身 不 相等 ， 是 唯一 一 个 非 自 反 ( 自 反 ，reflexive， 即 x === x 不 
成 立 ) 的 值 。 而 NaN != NaN 为 true， 很 奇怪 吧 ? 












































既然 我 们 无 法 对 NaN 进行 比较 (结果 永远 为 fatse) ， 那 应 该 怎样 来 判断 它 呢 ? 
var a = 2 / "foo"; 
isNaN( a ); // true 

很 简单 ， 可 以 使 用 内 建 的 全 局 工具 函数 isNaN(..) 来 判断 一 个 值 是 否 是 NaN。 


然而 操作 起 来 并 非 这 么 容易 。isNaN(..) 有 一 个 严重 的 缺陷 ， 它 的 检查 方式 过 于 死板 ， 就 
是 “检查 参数 是 否 不 是 NaN， 也 不 是 数字 ”。 但 是 这 样 做 的 结果 并 不 太 准 确 : 











var a=2/ "foo"; 
var b = "foo"; 


a; // NaN 
b; "foo" 


window.isNaN( a ); // true 
window.isNaN( b ); // true 





党 | 
很 明显 "foo" 不 是 一 个 数字 ， 但 是 它 也 不 是 NaN。 这 个 bug 自 JavaScript 问世 以 来 就 一 直 存 
在 ， 至 今 已 超过 19 年 。 


从 ES6 开始 我 们 可 以 使 用 工具 函数 Number .isNaN(..)。ES6 之 前 的 浏览 器 的 polyfill 如 下 : 


if (!Number.isNaN) { 
Number .isNaN = function(n) { 


return ( 
typeof n === "number" && 
window.isNaN( n ) 
); 
}; 
} 
var a= 2/ "foo"; 
var b = "foo"; 


Number .isNaN( a ); // true 
Number .isNaN( b ); // falseQ—— 好 | 





实际 上 还 有 一 个 更 简单 的 方法 ， 即 利用 NaN 不 等 于 自身 这 个 特点 。NaN 是 JavaScript 中 唯 
一 一 个 不 等 于 自身 的 值 。 
于 是 我 们 可 以 这 样 : 


if (!Number.isNaN) { 
Number .isNaN = function(n) { 
return n !== nN; 




















很 多 JavaScript 程序 都 可 能 存在 NaN 方面 的 问题 ， 所 以 我 们 应 该 尽量 使 用 Number .isNaN(..) 
这 样 可 靠 的 方法 ， 无 论 是 系统 内 置 还 是 polyfill。 





如 果 你 仍 在 代码 中 使 用 isNaN(..)， 那 么 你 的 程序 迟早 会 出 现 bug。 


2. 无 穷 数 
熟悉 传统 编译 型 语言 (如 C) 的 开发 人 员 可 能 都 遇 到 过 编译 错误 (compiler error) 或 者 运 
行 时 错误 (runtime exception)， 例 如 “ 除 以 0”: 





var a=1/ 90; 
然而 在 JavaScript 中 上 例 的 结果 为 Infinity ( 即 Number .POSITIVE_INfiNITY)。 同 样 : 


var a 
var b 


1/0; // Infinity 
-1/ 0; // -Infinity 


如 果 除 法 运算 中 的 一 个 操作 数 为 负数 ， 则 结果 为 -Infinity〈 即 Number.NEGATIVE_ 
INfiLNITY ) 。 


JavaScript 使 用 有 限 数 字 表 示 法 (finite numeric representation， 即 之 前 介绍 过 的 IEEE 754 
浮 点 数 )， 所 以 和 纯粹 的 数学 运算 不 同 ，JavaScript 的 运算 结果 有 可 能 溢出 ， 此 时 结果 为 
Infinity 或 者 -Infinity。 

















例如 : 
var a = Number .MAX_VALUE; // 1.7976931348623157e+308 
a+ ai // Infinity 
a + Math.pow( 2, 970 ); // Infinity 
a + Math.pow( 2, 969 ); // 1.7976931348623157e+308 

















规范 规定 ， 如 果 数 学 运算 (如 加 法 ) 的 结果 超出 处 理 范 围 ， 则 由 IEEE 754 规范 中 的 “就 
近 取 整 ”(round-to-nearest) 模式 来 决定 最 后 的 结果 。 例 如 ， 相 对 于 Infintty，Number .MAX_ 
VALUE + Math.pow(2，969) 与 Number.MAX_VALUE 更 为 接近 ， 因 此 它 被 “向 下 取 整 ”(round 
down) ; 而 Number.MAX_VALUE + Math.pow(2，970) 与 Infinity 更 为 接近 ， 所 以 它 被 “向 上 
取 整 ”(round up)。 

















这 个 问题 想 多 了 容易 头疼 ， 还 是 就 此 打住 吧 。 


计算 结果 一 旦 溢出 为 无 穷 数 (infinity) 就 无 法 再 得 到 有 穷 数 。 换 句 话 说， 就 是 你 可 以 从 有 
穷 走 向 无 穷 ， 但 无 法 从 无 穷 回 到 有 穷 。 

















有 人 也 许 会 问 :“ 那 么 无 穷 除 以 无 穷 会 得 到 什么 结果 呢 ? ”我 们 的 第 一 反应 可 能 会 是 “17 
或 者 “无 穷 "， 可 惜 都 不 是 。 因 为 从 数学 运算 和 JavaScript 语言 的 角度 来 说 ，Infinity/ 
Infinity 是 一 个 未 定义 操作 ， 结 果 为 NaN。 














那么 有 穷 正 数 除 以 9 呢 ? 很 简单 ， 结 果 是 9。 有 穷 负数 除 以 Infinity 呢 ? 这 里 留 个 
起 念 ， 后 面 将 作 介 


3. 零 值 
这 部 分 内 容 对 于 习惯 数学 思维 的 读者 可 能 会 带 来 困惑 ，JavaScript 有 一 个 常规 的 @ (也 叫 作 
+0) 和 一 个 -0。 在 解释 为 什么 会 有 -9 之 前 ， 我 们 先 来 看 看 JavaScript 是 如 何 来 处 理 它 的 。 


-0 除了 可 以 用 作 常 量 以 外 ， 也 可 以 是 某 些 数 学 运算 的 返回 值 。 例 如 : 











var a 
var b 


二 全 
BE/ = 


加 法 和 减法 运算 不 会 得 到 负 零 (negative zero)。 
负 零 在 开发 调试 控制 台中 通常 显示 为 -9， 但 在 一 些 老 版 本 的 浏览 器 中 仍然 会 显示 为 0。 
根据 规范 ， 对 负 零 进行 字符 串 化 会 返回 "9": 








var a=0/ -3; 


至 少 在 某 些 浏览 器 的 控制 台中 显示 古 正 确 的 

















da; // -0 
// 但 是 规范 定义 的 返回 结果 是 这 样 ! 
a.toString(); // "0" 
a +t "; // "0" 
String( a ); // "0" 


// JSON 也 如 此 ,很 奇怪 
JSON.stringify( a ); // "0" 











有 意思 的 是 ， 如 果 反 过 来 将 其 从 字符 串 转 换 为 数字 ， 得 到 的 结果 是 准确 的 : 





+"-0"; // -9 
Number( "-0" ); // -0 
JSON.parse( "-0" ); // -0 


JSON.stringify(-0) 返回 "0"， 而 JSON.parse("-0") 返回 -0。 





负 零 转换 为 字符 串 的 结果 令 人 费解 ， 它 的 比较 操作 也 是 如 此 : 


vara= 0; 
var b=0/ -3; 
a == b; // true 
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-0 == 0; // true 


a === b; // true 
-0 === 0;  // true 
0 > -0; // false 
a > b; // false 

















要 区 分 -0 和 9， 不 能 仅仅 依赖 开发 调试 窗口 的 显示 结果 ， 还 需要 做 一 些 特殊 处 理 : 


function isNegZzero(n) { 
n = Number( n ); 


return (n === 0) && (1 / n === -Infinity); 
} 
isNegZero( -0 ); // true 
isNegZzero( 0 / -3 ); // true 
isNegZzero( 0 ); // false 


抛 开学 术 上 的 党 枝 福 节 不 论 ， 我 们 为 什么 需要 负 零 呢 ? 
有 些 应 用 程序 中 的 数据 需要 以 级 数 形式 来 表示 (比如 动画 帧 的 移动 速度 )， 








(sign) 用 来 代表 其 他 信息 (比如 移动 的 方向 )。 此 时 如 果 一 个 值 为 0 的 变量 



































数字 的 符号 位 





量 失去 了 它 的 符 


号 位 ， 它 的 方向 信息 就 会 丢失 。 所 以 保留 6 值 的 符号 位 可 以 防止 这 类 情况 发 生 。 


2.4.4 ”特殊 等 式 


如 前 所 述 ，NaN 和 -9 在 相等 比较 时 的 表现 有 些 特别 。 由 于 NaN 和 自身 不 相等 ， 所 以 必须 使 
用 ES6 中 的 Number .isNaN(..) (或 者 polyfill)。 而 -6 等 于 9 (对 于 === 也 是 如 此 ， 参 见 第 





4 章 ) ， 因 此 我 们 必须 使 用 isNegzero(..) 这 样 的 工具 国 数 。 


ES6 中 新 加 入 了 一 个 工具 方法 0bject.is(..) 来 判断 两 个 值 是 否 绝对 相等 ， 
上 述 所 有 的 特殊 情况 : 


var a 
var b 


2 / "foo"; 
=37*° OF 


Object.is( a, NaN ); // true 
Object.is( b, -0 ); // true 


Object.is( b, 0 ); // false 


对 于 ES6 之 前 的 版 本 ，0bject.is(..) 有 一 个 简单 的 polyfill: 





if (!0Object.is) { 
Object.is = function(vi, v2) { 
// 判断 是 否 是 -9 
if (v1 === 0 && v2 === 0) { 
return 1 / v1 === 1 / v2; 


可 以 用 来 处 理 











} 

// 判断 是 否 是 NaN 

if (v1 !== v1) { 
return v2 !== v2; 

} 

// 其 他 情况 


return v1 === v2; 





| 
} 
能 使 用 == 和 === (参见 第 4 章 ) 时 就 尽量 不 要 使 用 0bject.is(..)， 因 为 前 者 效率 更 高 、 
更 为 通用 。0bject.is(..) 主要 用 来 处 理 那 些 特殊 的 相等 比较 。 


2.5 值 和 引用 


在 许多 编程 语言 中 ， 赋 值 和 参数 传递 可 以 通过 值 复 制 (value-copy) 或 者 引用 复制 
(reference-copy) 来 完成 ， 这 取决 于 我 们 使 用 什么 语法 。 


例如 ， 在 C++ 中 如 有 果 要 向 函数 传递 一 个 数字 并 在 函数 中 更 改 它 的 值 ， 就 可 以 这 样 来 声明 参 
数 int& myNum， 即 如 果 传 递 的 变量 是 Xx，myNun 就 是 指向 x 的 引用 。 引 用 就 像 一 种 特殊 的 指 
针 ， 是 来 指向 变量 的 指针 (别名 )。 如 采 参 数 不 声 明 为 引用 的 话 ， 参 数值 总 是 通过 值 复制 
的 方式 传递 ， 即 便 对 复杂 的 对 象 值 也 是 如 此 。 


JavaScript 中 没有 指针 ， 引 用 的 工作 机 制 也 不 尽 相 同 。 在 JavaScript 中 变量 不 可 能 成 为 指向 
另 一 个 变量 的 引用 。 














JavaScript 引用 指向 的 是 值 。 如 果 一 个 值 有 10 个 引用 ， 这些 引用 指向 的 都 是 同一 个 值 ， 它 
们 相互 之 间 没 有 引用 / 指向 关系 。 


JavaScript 对 值 和 引用 的 赋值 /传递 在 语法 上 没有 区 别 ， 完 全 根据 值 的 类 型 来 决定 。 
下 面 来 看 一 个 例子 














var a = 2; 

var b = a; // b 是 a 的 值 的 一 个 副本 
b++; 

a; // 2 

b; // 3 


var C = [1,2,3]; 
var d = c; // d 是 [1,2,3] 的 一 个 引用 
d.push( 4 ); 





简单 值 ( 即 标量 基本 类 型 值 ，scalar primitive) 总 是 通过 值 复制 的 方式 来 赋值 
nuLL、undefined、 字 符 串 、 数 字 、 布 尔 和 了 ES6 中 的 symbol。 


/传递 ， 包 括 











TI 








汪 现 


直 (compound value) 对 象 (包括 数组 和 封装 对 象 ， 参 见 第 3 章 ) 和 国 数 ， 则 总 
是 通过 引用 复制 的 方式 来 赋值 / 传递 。 





六 
Ei 路 














上 例 中 2 是 一 个 标量 基本 类 型 值 ， 所 以 变量 a 持 有 该 值 的 一 个 复 本 , b 持 有 它 的 另 一 个 复 
本 。b 更 改 时 ，a 的 值 保持 不 变 。 











I 











c 和 dd 则 分 别 指向 同一 个 复合 值 [1,2,3] 的 两 个 不 同 引 用 。 请 注意 ，c 和 d 仅仅 是 指向 值 
[1,2,3]， 并 非 持 有 。 所 以 它们 更 改 的 是 同一 个 值 (如 调用 .push(4))， 随 后 它们 都 指向 更 
改 后 的 新 值 [1,2,3,4]。 























由 于 引用 指向 的 是 值 本 身 而 非 变量 ， 所 以 一 个 引用 无 法 更 改 另 一 个 引用 的 指向 


var a = [1,2,3]; 
var b = a; 

a; // [1,2,3] 
b; // [1,2,3] 


// 然后 

b = [4,5,6]; 
a; // [1,2,3] 
b; // [4,5,6] 





b=[4,5,6] 并 不 影响 a 指向 值 [1,2,3]， 除 非 b 不 是 指向 数组 的 引用 ， 而 是 指向 a 的 指针 ， 
但 在 JavaScript 中 不 存在 这 种 情况 | 


函数 参数 就 经 常 让 人 产生 这 样 的 困惑 : 











加 





function foo(x) { 
x.push( 4 ); 
X; // [1,2,3,4] 


// 然后 

x = [4,5,6]; 

x.push( 7 ); 

X, // [4,5,6,7] 
} 
var a = [1,2,3]; 
foo( a ); 


ai // 是 [1,2,3,4], 不 是 [4,5,6,7] 





我 们 向 函数 传递 a 的 时 候 ， 实 际 是 将 引用 a 的 一 个 复 本 赋值 给 x， 而 a 仍然 指向 [1,2,3]。 
在 函数 中 我 们 可 以 通过 引用 x 来 更 改 数组 的 值 (push(4) 之 后 变 为 [1,2,3,4])。 但 x = 
[4,5,6] 并 不 影响 a 的 指向 ， 所 以 a 仍然 指向 [1,2,3,4]。 

















我 们 不 能 通过 引用 x 来 更 改 引 用 a 的 指向 ， 只 能 更 改 3 和 x 共同 指向 的 值 。 








如 有 果 要 将 a 的 值 变 为 [4,5,6,7]， 必 须 更 改 x 指向 的 数组 ， 而 不 是 为 x 赋值 一 个 新 的 数组 。 


function foo(x) { 
x.push( 4 ); 
X; // [1,2,3,4] 


// 然后 
x.length = 0; // 清空 数组 
x.push( 4, 5, 6, 7 ); 
XX; // [4,5,6,7] 
var a = [1,2,3]; 


foo( a ); 


ai // 是 [4,5,6,7], 不 是 [1,2,3,4] 





从 上 例 可 以 看 出 ，x.Length = 9 和 x.push(4,5,6,7) 并 没有 创建 一 个 新 的 数组 ， 而 是 更 改 
了 当前 的 数组 。 于 是 a 指向 的 值 变 成 了 [4,5,6,7]。 

















请 记 住 : 我 们 无 法 自行 决定 使 用 值 复制 还 是 引用 复制 ， 一 切 由 值 的 类 型 来 决定 。 

















如 果 通 过 值 复制 的 方式 来 传递 复合 值 〈 如 数组 )， 就 需要 为 其 创建 一 个 复 本 ， 这 样 传递 的 
就 不 再 是 原始 值 。 例 如 : 











foo( a.slice() ); 


slice(..) 不 带 参数 会 返回 当前 数组 的 一 个 浅 复 本 (shallow copy)。 由 于 传递 给 函数 的 是 指 
向 该 复 本 的 引用 ， 所 以 foo(..) 中 的 操作 不 会 影响 a 指向 的 数组 。 








相反 ， 如 果 要 将 标量 基本 类 型 值 传递 到 函数 内 并 进行 更 改 ， 就 需要 将 该 值 封装 到 一 个 复合 
值 (对 象 、 数 组 等 ) 中 ， 然 后 通过 引用 复制 的 方式 传递 。 














function foo(wrapper) { 
wrapper.a = 42; 


var obj = { 
a: 2 

}; 

foo( obj ); 

obj.a; // 42 
这 里 obj 是 一 个 封装 了 标量 基本 类 型 值 a obj 引用 的 一 个 复 本 作为 参数 
wrapper 被 传递 到 foo(..) 中 。 这 样 我 们 就 可 以 通过 wrapper 来 访问 该 对 象 并 更 改 它 的 属 
性 。 函 数 执 行 结束 后 obj.a 将 变 成 42。 






































这 样 看 来 ， 如 果 需 要 传递 指向 标量 基本 类 型 值 (比如 2) 的 引用 ， 就 可 以 将 其 封装 到 对 应 
的 数字 封装 对 象 中 (参见 第 3 章 )。 

与 预期 不 同 的 是 ， 虽 然 传递 的 是 指向 数字 对 象 的 引用 复 本 ， 但 我 们 并 不 能 通过 它 来 更 改 其 
中 的 基本 类 型 值 : 



































function foo(x) { 
X= XxX+ 1 
x; // 3 

} 


var a = 2; 
var b = new Number( a ); // 0bject(a) 也 一 样 





foo( b ); 
console.log( b ); // 是 2, 不 是 3 

















原因 是 标量 基本 类 型 值 是 不 可 更 改 的 (字符 串 和 布尔 也 是 如 此 )。 如 果 一 个 数字 对 象 的 标 
量 基 本 类 型 值 是 2， 那 么 该 值 就 不 能 更 改 ， 除 非 创 建 一 个 包含 新 值 的 数字 对 象 。 


x = x + 1 中 ,x 中 的 标量 基本 类 型 值 2 从 数字 对 象 中 拆 封 (或 者 提取 ) 出 来 后 ，x 就 神 不 
知 鬼 不 觉 地 从 引用 变 成 了 数字 对 象 ， 它 的 值 为 2 + 1 每 于 3。 然 而 函数 外 的 b 仍 然 指 向 原 
来 那个 值 为 2 的 数字 对 象 。 

我 们 还 可 以 为 数字 对 象 添加 属性 (只 要 不 更 改 其 内 部 的 基本 类 型 值 即 可 )， 通 过 它们 间接 
地 进行 数据 交换 。 

不 过 这 种 做 法 不 太 常 见 ， 大 多 数 开发 人 员 可 能 都 觉得 这 不 是 一 个 好 办 法 。 

相对 而 言 ， 前 面 用 obj 作为 封装 对 象 的 办 法 可 能 更 好 一 些 。 这 并 不 是 说 数字 等 封装 对 象 没 
有 什么 用 ， 只 是 多 数 情况 下 我 们 应 该 优先 考虑 使 用 标量 基本 类 型 。 


引用 的 功能 很 强大 ,但 有 时 也 难免 成 为 阻碍 。 赋 值 /参数 传递 是 通过 引用 还 是 值 复制 完全 
由 值 的 类 型 来 决定 ， 所 以 使 用 哪 种 类 型 也 间接 决定 了 赋值 /参数 传递 的 方式 。 









































2.6 ”小结 


JavaScript 中 的 数组 是 通过 数字 索引 的 一 组 任意 类 型 的 值 。 字 符 串 和 数组 类 似 ， 但 是 它们 的 
行为 特征 不 同 ， 在 将 字符 作为 数组 来 处 理 时 需要 特别 小 心 。JavaScript 中 的 数字 包括 “ 整 
数 ” 和 “ 浮 点 型 ”。 


基本 类 型 中 定义 了 几 个 特殊 的 值 。 


null 类 型 只 有 一 个 值 nutL，undefined 类 型 也 只 有 一 个 值 undefined。 所 有 变量 在 赋值 之 
前 默认 值 都 是 undefined。void 运算 符 返 回 undefined。 























数字 类 型 有 几 个 特殊 值 ， 包 括 NaN ( 意 指 “not a number”， 更 确切 地 说 是 “invalid 
number”)、+Infinity、-Infinity 和 -0。 


简单 标量 








基本 类 型 值 (字符 串 和 数字 等 ) 通过 值 复制 来 赋值 /传递 ， 而 复合 值 (对 象 等 ) 
通过 引用 复制 来 赋值 / 传递 。JavaScript 中 的 引用 和 其 他 语言 中 的 引用 / 指针 不 同 ， 它 们 不 
能 指向 别 的 变量 /1 引用 ， 只 能 指向 值 。 














第 1 章 和 第 2 章 曾 提 到 JavaScript 的 内 建国 数 (built-in function)， 也 叫 原生 国 数 (native 
function)， 如 String 和 Number。 本 章 将 详细 介绍 它们 。 


常用 的 原生 函数 有 : 


。 String() 

。 Number() 

。 Boolean() 
。 Array() 

。 Object() 

。 Function() 
。 RegExp() 

。 Date() 

。 Error() 


。 Symbol() 一 一 ES6 中 新 加 入 的 ! 
实际 上 ， 它 们 就 是 内 建国 数 。 





熟悉 Java 语 言 的 人 会 发 现 JavaScript 中 的 String() 和 Java 中 的 字符 串 构 造 国 数 
String(..) 非常 相似 ， 可 以 这 样 来 用 : 


var s = new String( "Hello World!" ); 


console.log( s.toString() ); // "Hello World!" 
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原生 函数 可 以 被 当 作 构 造 函 数 来 使 用 ,但 其 构造 出 来 的 对 象 可 能 会 和 我 们 设想 的 有 所 
出 入 : 


var a = new String( "abc" ); 
typeof a; // 是 "object", 不 是 "String" 
a instanceof String; // true 


Object.prototype.toString.call( a ); // "[object String]" 


通过 构造 函数 (如 new String("abc")) 创建 出 来 的 是 封装 了 基本 类 型 值 (如 "abc") 的 封 
装 对 象 。 


请 注意 : typeof 在 这 里 返回 的 是 对 象 类 型 的 子 类 型 。 
可 以 这 样 来 查看 封装 对 象 ; 





console.log( a ); 


由 于 不 同 浏览 器 在 开发 控制 台中 显示 对 象 的 方式 不 同 (对象 序 列 化 ,object serialization)， 
所 以 上 面 的 输出 结果 也 不 尽 相 同 。 

















在 本 书写 作 期 间 ，Chrome 的 最 新 版 本 是 这 样 显示 的 : String {0: "a",1: 
"b"，2: "c"，Length: 3，[[PrimitiveValue]]: "abc"}， 而 老 版 本 这 样 显示 : 
string {0: "a"，1: "b"，2: "c"}。 最 新 版 本 的 Firefox 这 样 显示 : String 
["a","b","c"]; 老 版 本 这 样 显 示 : "abc"， 并 且 可 以 点 击 打开 对 象 查看 器 。 
这 些 输出 结果 随 着 浏览 器 的 演进 不 断 变 化 ， 也 带 给 人 们 不 同 的 体验 。 



































再 次 强调 ，new String("abc") 创建 的 是 字符 串 "abc" 的 封装 对 象 ， 而 非 基本 类 型 值 "abc"。 


3.1 内 部 属性 [[Class]] 


所 有 typeof 返回 值 为 "object'" 的 对 象 (如 数组 ) 都 包含 一 个 内 部 属性 [[Class]] (我 们 可 
以 把 它 看 作 一 个 内 部 的 分 类 ， 而 非 传 统 的 面向 对 象 意义 上 的 类 )。 这 个 属性 无 法 直接 访问 ， 
一 般 通 过 0bject.prototype.toString(..) 来 查看 。 例 如 : 


Object.prototype.toString.call( [1,2,3] ); 
// "[object Array]" 


Object.prototype.toString.call( /regex-literal/i ); 
// "[object RegExp]" 


上 例 中 ， 数 组 的 内 部 [[Class]] 属性 值 是 "Array"， 正 则 表达 式 的 值 是 "RegExp"。 多 数 情 况 
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下 ， 对 象 的 内 部 [[Class]] 属性 和 创建 该 对 象 的 内 建 原生 构造 函数 相对 应 (如 下 )， 但 并 非 
总 是 如 此 。 
那么 基本 类 型 值 呢 ? 下 面 先 来 看 看 null 和 undefined: 


Object.prototype.toString.call( null ); 
// "[object Null]" 


Object.prototype.toString.call( undefined ); 
// "[object Undefined]" 


虽然 NuULL() 和 Undefined() 这 样 的 原生 构造 函数 并 不 存在 ,但 是 内 部 [[Class]] 属性 值 仍 
然 是 "Null" 和 "Undefined"。 








值 (如 字符 串 、 数 字 和 布尔 ) 的 情况 有 所 不 同 ， 通 常 称 为 “包装 ”(boxing， 


壮 
合 
风暴 
讲 
状 
幸 


Object.prototype.toString.call( "abc" ); 
// "[object String]" 


Object.prototype.toString.call( 42 ); 
// "[object Number]" 


Object.prototype.toString.call( true ); 
// "[object Boolean]" 





上 例 中 基本 类 型 值 被 各 自 的 封装 对 象 自动 包装 ， 所 以 它们 的 内 部 [[Class]] 属性 值 分 别 为 


"String"、"Number" 和 "Boolean"。 











从 ES5 到 ES6，tostring() 和 [[Class]] 的 行为 发 生 了 一 些 变化 ， 详 情 见 本 
系列 的 《你 不 知道 的 JavaScript (下 卷 )》 的 “ES6 & Beyond” 部 分 。 





3.2 ”封装 对 象 包装 

封装 对 象 (object wrapper) 扮演 着 十 分 重要 的 角色 。 由 于 基本 类 型 值 没 有 .Length 
和 .toString() 这 样 的 属性 和 方法 ， 需 要 通过 封装 对 象 才能 访问 ， 此 时 JavaScript 会 自动 为 
基本 类 型 值 包装 (box 或 者 wrap) 一 个 封装 对 象 ; 


var a = "abc"; 


a.length; // 3 
a.toUpperCase(); // "ABC" 
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如 果 需 要 经 常用 到 这 些 字符 串 属性 和 方法 ， 比 如 在 for 循环 中 使 用 i < a:tength， 那 么 从 








一 开始 就 创建 一 个 封装 对 象 也 许 更 为 方便 ， 这 样 JavaScript 引擎 就 不 用 每 次 都 





自动 创建 了 。 





但 实际 证 明 这 并 不 是 一 个 好 办 法 ， 因 为 浏览 器 已 经 为 .Length 这 样 的 常见 情况 做 了 性 能 优 








化 ， 直 接 使 用 封装 对 象 来 “提前 优化 ”代码 反而 会 降低 执行 效率 。 


一 般 情况 下 ， 我 们 不 需要 直接 使 用 封装 对 象 。 最 好 的 办 法 是 让 上 JavaScript 引擎 自己 决定 什 
么 时 候 应 该 使 用 封装 对 象 。 换 句 话 说 ， 就 是 应 该 优先 考虑 使 用 "abc" 和 42 这 样 的 基本 类 型 





值 ， 而 非 new String("abc") 和 new Number(42)。 


封装 对 象 释疑 
使 用 封装 对 象 时 有 些 地 方 需要 特别 注意 。 
比如 BooLean : 

var a = new Boolean( false ); 


if (1a) { 
console.log( "0ops”); // 执行 不 到 这 里 
} 


























我 们 为 false 创建 了 一 个 封装 对 象 ， 然 而 该 对 象 是 真 值 (“truthy”， 即 总 是 返回 true， 参 见 


第 4 章 )， 所 以 这 里 使 用 封装 对 象 得 到 的 结果 和 使 用 false 截然 相反 。 
如 果 想 要 自行 封装 基本 类 型 值 ， 可 以 使 用 0bject(..) 函数 (不 带 new 关键 字 ) 


A 





var a = "abc"; 
var b = new String( a ); 
var C = Object( a ); 


typeof a; // "string" 
typeof b; // "object" 
typeof c; // "object" 


b instanceof String; // true 
Cc instanceof String; // true 


Object.prototype.toString.call( b ); // "[object String]" 
Object.prototype.toString.call( c¢c ); // "[object String]" 





再 次 强调 ， 一 般 不 推荐 直接 使 用 封装 对 象 (如 上 例 中 的 b 和 <c)， 但 它们 偶尔 也 会 派 上 


用 场 。 


3.3 ” 拆 封 


如 有 果 想 要 得 到 封装 对 象 中 的 基本 类 型 值 ， 可 以 使 用 valueof() 函数 : 
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var a = new String( "abc" ); 
var b = new Number( 42 ); 
var Cc = new Boolean( true ); 


a.valueOf(); // "abc" 
b.vaLueOf(); // 42 
c.VvaLueof(); // true 


在 需要 用 到 封装 对 象 中 的 基本 类 型 值 的 地 方 会 发 生 隐 式 拆 封 。 具 体 过 程 ( 即 强制 类 型 转 
换 ) 将 在 第 4 章 详细 介绍 。 








var a = new String( "abc" ); 


var b + ""; // b 的 值 为 "abc" 
typeof a; // "object" 
typeof b; // "string" 


3.4 原生 函数 作为 构造 函 炎 


关于 数组 (array)、 对 象 (object)、 函 数 (function) 和 正则 表达 式 ， 我 们 通常 喜欢 以 常 
量 的 形式 来 创建 它们 。 实 际 上 ， 使 用 常量 和 使 用 构造 函数 的 效果 是 一 样 的 (创建 的 值 都 是 
通过 封装 对 象 来 包装 )。 





如 前 所 述 ， 应 该 尽量 避免 使 用 构造 函数 ， 除 非 十 分 必要 ， 因 为 它们 经 常会 产生 意 想不到 的 
结果 。 


3.4.1 Array(..) 


var a = new Array( 1, 2, 3 ); 


a; // [1, 2, 3] 


var b = [1, 2, 3]; 
b; // [1, 2, 3] 


构造 函数 Array(..) 不 要 求 必 须 带 new 关键 字 。 不 带 时 ， 它 会 被 自动 补 上 。 
因此 Array(1,2,3) 和 new Array(1,2,3) 的 效果 是 一 样 的 。 














Array 构造 函数 只 带 一 个 数字 参数 的 时 候 ， 该 参数 会 被 作为 数组 的 预 设 长 度 (length)， 而 
非 只 充当 数组 中 的 一 个 元 素 。 








这 实 非 明 智之 举 : 一 是 容易 忘记 ， 二 是 容易 出 错 。 
更 为 关键 的 是 ， 数 组 并 没有 预 设 长 度 这 个 概念 。 这 样 创建 出 来 的 只 是 一 个 空 数组 ， 只 不 过 














它 的 Length 属性 被 设置 成 了 指定 的 值 。 


如 若 一 个 数组 没有 任何 单元 ， 但 它 的 length 属性 中 却 显 示 有 单元 数量 ， 这 样 奇特 的 数据 结 
构 会 导致 一 些 怪异 的 行为 。 而 这 一 切 都 归咎 于 已 被 废止 的 旧 特 性 〈 类 似 arguments 这 样 的 
类 数组 )。 























我 们 将 包含 至 少 一 个 “ 空 单元 ”的 数组 称 为 “ 稀 疏 数组 ”。 








对 此 ， 不 同 浏览 器 的 开发 控制 台 显 示 的 结果 也 不 尽 相 同 ， 这 让 问题 变 得 更 加 复杂 。 
例如 : 
var a = new Array( 3 ); 


a.Length; // 3 
ay 


a 在 Chrome 中 显示 为 [ undefined x 3 ] (目前 为 止 )， 这 意味 着 它 有 三 个 值 为 undefined 
的 单元 ， 但 实际 上 单元 并 不 存在 (“ 空 单元 ”这 个 叫 法 也 同样 不 准确 )。 


从 下 面 代 码 的 结果 可 以 看 出 它们 的 差别 : 








var a = new Array( 3 ); 

var b = [ undefined, undefined, undefined ]; 
VSF GE = [|]; 

c.length = 3; 


a; 
b; 
[a 





我 们 可 以 创建 包含 空 单元 的 数组 ， 如 上 例 中 的 c。 只 要 将 length 属性 设置 为 
超过 实际 单元 数 的 值 ， 就 能 隐 式 地 制造 出 空 单元 。 另 外 还 可 以 通过 delete 
b[1] 在 数组 b 中 制造 出 一 个 空 单元 。 






































b 在 当前 版 本 的 Chrome 中 显示 为 [ undefined，undefined，undefined ]， 而 a 和 <c 则 显示 
为 [ undefined x 3 ]。 是 不 是 感到 很 困惑 ? 


更 令 人 费解 的 是 在 当前 版 本 的 Firefox 中 a 和 < 显示 为 [ ，，，]。 仔 细 看 来 ， 这 其 中 有 三 
个 逗号 ， 代 表 四 个 空 单元 ， 而 不 是 三 个 。 





























Firefox 在 输出 结果 后 面 多 添 了 一 个 ,， 原 因 是 从 ES5 规范 开始 就 允许 在 列表 (数组 值 、 属 
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性 列表 等 ) 末尾 多 加 一 个 逗号 (在 实际 处 理 中 会 被 忽略 不 计 )。 所 以 如 果 你 在 代码 或 者 调 
试 控 制 台 中 输入 [ ，，，]， 实 际 得 到 的 是 [ ，，] (包含 三 个 空 单元 的 数组 )。 这 样 做 虽 
然 在 控制 台中 看 似 令 人 费解 ， 实 则 是 为 了 让 复制 粘贴 结果 更 为 准确 。 











读 到 这 里 你 或 许 已 是 一 头 雾 水 ,但 没关系 ， 打 起 精神 ， 你 不 是 一 个 人 在 战斗 ! 


针对 这 种 情况 ，Firefox 将 [ ，，，] 改 为 显示 Array [<3 empty sLots>]， 这 
无 疑 是 个 很 大 的 提升 。 





更 糟糕 的 是 ， 上 例 中 a 和 的 行为 有 时 相同 ， 有 时 又 大 相 径 庭 : 


asjotn( wa $y 1 
b.join( %-" ); // "--" 


a.map(function(v,i){ return i; }); // [ undefined x 3 ] 
b.map(function(v,i){ return i; }); // [ 09, 1, 2 ] 


a.map(.….) 之 所 以 执行 失败 ， 是 因为 数组 中 并 不 存在 任何 单元 ， 所 以 map(.……) 无 从 遍历 。 而 
join(..) 却 不 一 样 ， 它 的 具体 实现 可 参考 下 面 的 代码 : 




















function fakeJoin(arr,connector) { 


var str = ""; 
for (var i = 0; i < arr.length; i++) { 
if (i > 0) { 


str += connector; 


} 
if (arr[i] !== undefined) { 
str += arr[il]; 
} 
} 


return str; 


} 


var a = new Array( 3 ); 
fakeJoin( a, "-" ); // "--" 





从 中 可 以 看 出 ，join(..) 首先 假定 数组 不 为 空 ， 然 后 通过 length 属性 值 来 遍历 其 中 的 元 
素 。 而 map(..) 并 不 做 这 样 的 假定 ， 因 此 结果 也 往往 在 预期 之 外 ， 并 可 能 导致 失败 。 














我 们 可 以 通过 下 述 方式 来 创建 包含 undefined 单元 (而 非 “ 空 单元 ”) 的 数组 : 


var a = Array.apply( null, { length: 3 } ); 
a; // [ undefined, undefined, undefined ] 


可 


上 述 代 码 或 许 会 引起 困惑 ， 下 面 大 致 解释 一 下 。 
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apply(..) 是 一 个 工具 函数 ， 适 用 于 所 有 函数 对 象 ， 它 会 以 一 种 特殊 的 方式 来 调用 传递 

一 个 参数 是 this 对 象 《你 不 知道 的 JavaScript (上 卷 )》 的 “this 和 对 象 原型 ”部 分 中 
有 相关 介绍 )， 这 里 不 用 太 过 费心 ， 暂 将 它 设 为 nutL。 第 二 个 参数 则 必须 是 一 个 数组 (或 
者 类 似 数组 的 值 ， 也 叫 作 类 数组 对 象 ，array-like object)， 其 中 的 值 被 用 作 函 数 的 参数 。 


于 是 Array.apply(..) 调用 Array(..) 国 数 ， 并 且 将 { Length: 3 } 作 为 函数 的 参数 。 


我 们 可 以 设想 apply(..) 内 部 有 一 个 for 循环 (与 上 述 join(..) 类 似 )， 从 9 开始 循环 到 
Length ( 即 循 环 到 2， 不 包括 3)。 


假设 在 apply(.…) 内 部 读数 组 参数 名 为 arr，for 循环 就 会 这 样 来 遍历 数组 ，arr[e]、 
arr[]、arr[2]。 然 而 ， 由 于 { tength: 3 } 中 并 不 存在 这 些 属性 ， 所 以 返回 值 为 


Undefined。 






































换 名 话说， 我 们 执行 的 实际 上 是 Array(undefined，undefined，undefined) ， 所 以 结果 是 单 
元 值 为 undefined 的 数组 ， 而 非 空 单 元 数组 。 


虽然 Array.appLy( nuLL，{ Length: 3 } ) 在 创建 undefined 值 的 数组 时 有 些 奇 怪 和 繁琐 ， 
但 是 其 结果 远 比 Array(3) 更 准确 可 靠 。 
































总 之 ,永远 不 要 创建 和 使 用 空 单元 数组 。 





3.4.2 Object(..)、Function(..) 和 RegExp(..) 
同样 ， 除 非 万 不 得 已 ， 否 则 尽量 不 要 使 用 0bject(..)/Function(..)/RegExp(..): 








var Cc = new Object(); 
c.foo = "bar"; 
c; // { foo: "bar" } 


var d= { foo: "bar" }; 
d; // { foo: "bar" } 


var e = new Function( "a", "return a * 2;" ); 
var f = function(a) { return ax 2; } 
function g(a) { return a * 2; } 


var h 
var i 


new RegExp( "^a*b+", "g" ); 
/^a*b+/g; 


在 实际 情况 中 没有 必要 使 用 new 0bject() 来 创建 对 象 ， 因 为 这 样 就 无 法 像 常 量 形式 那样 一 
次 设 定 多 个 属性 ， 而 必须 逐一 设 定 。 


构造 函数 Function 只 在 极 少 数 情况 下 很 有 用 ， 比 如 动态 定义 函数 参数 和 函数 体 的 时 候 。 不 
































要 把 Function(..) 当 作 evall..) 的 替代 品 ， 你 基本 上 不 会 通过 这 种 方式 来 定义 函数 。 
强烈 建议 使 用 常量 形式 (如 /^a*b+/g) 来 定义 正则 表达 式 ， 这 样 不 仅 语法 简单 ， 执 行 效 率 
也 更 高 ， 因 为 JavaScript 引擎 在 代码 执行 前 会 对 它们 进行 预 编译 和 缓存 。 与 前 面 的 构造 函 
数 不 同 ，RegExp(..) 有 时 还 是 很 有 用 的 ， 比 如 动态 定义 正则 表达 式 时 : 























var name = "Kyle"; 
var namePattern = new RegExp( "\\b(?:" + name + ")+\\b", "ig" ); 


var matches = someText.match( namePattern ); 


上 述 情 况 在 JavaScript 编程 中 时 有 发 生 ， 这 时 new RegExp("pattern","flags") 就 能 派 上 用 
场 。 


3.4.3 Date(..) 和 Error(..) 

相 较 于 其 他 原生 构造 函数 ，Date(..) 和 Error(..) 的 用 处 要 大 很 多 ， 因 为 没有 对 应 的 常量 
形式 来 作为 它们 的 替代 。 

创建 日 期 对 象 必 须 使 用 new Date()。Date(..) 可 以 带 参数 ， 用 来 指定 日 期 和 时 间 ， 而 不 带 
参数 的 话 则 使 用 当前 的 日 期 和 时 间 。 


Date(. .) 主要 用 来 获得 当前 的 Unix 时 间 惟 (从 1970 年 1 月 1 日 开始 计算 ,以 秒 为 单位 )。 
该 值 可 以 通过 日 期 对 象 中 的 getTime() 来 获得 。 





从 ES5 开始 引入 了 一 个 更 简单 的 方法 ， 即 静态 函数 Date.now()。 对 ES5 之 前 的 版 本 我 们 可 
以 使 用 下 面 的 polyfill: 














if (!Date.now) { 
Date.now = function(){ 
return (new Date()).getTime(); 


}; 
} 





如 果 调 用 Date() 时 不 带 new 关键 字 ， 则 会 得 到 当前 日 期 的 字符 串 值 。 其 具体 
格式 规范 没有 规定 ， 浏 览 器 使 用 "Fri Jul 18 2014 00:31:02 GMT-0500 (CDT)" 
这 样 的 格式 来 显示 。 





构造 函数 Error(..) (与 前 面 的 Array() 类 似 ) 带 不 带 new 关键 字 都 可 。 








创建 错误 对 象 (error object) 主要 是 为 了 获得 当前 运行 栈 的 上 下 文 (大 部 分 JavaScript 引擎 
通过 只 读 属 性 .stack 来 访问 )。 栈 上 下 文 信息 包括 函数 调用 栈 信息 和 产生 错误 的 代码 行 号 ， 
以 便于 调试 (debug ) 。 
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错误 对 象 通常 与 throw 一 起 使 用 : 


function foo(x) { 
if (!x) { 


throw new Error( "x wasn’t provided" ); 
3 


//.. 
} 











通常 错误 对 象 至 少 包含 一 个 message 属性 ， 有 了 时 也 不 乏 其 他 属性 (必须 作为 只 读 属 性 访 


问 )， 如 type。 stack 属性 以 外 ， 最 好 的 办 法 是 调用 〈 显 式 调用 或 者 通 


过 强制 类 


型 转换 隐 式 调用 ， 参 见 第 4 章 ) tostring() 来 获得 经 过 格式 化 的 便于 阅读 的 错误 信息 。 


EvaLError(..)、 RangeError(..)、 ReferenceError(..)、 SyntaxErro 





动 调用 。 


3.4.4 Symbol(..) 


ES6 中 新 加 入 了 一 个 基本 数据 类 型 一 一 符号 (Symbol)。 符 号 是 具有 唯一 性 的 特殊 值 (六 


除 Error(..) 之 外 ， 还 有 一 些 针 对 特定 错误 类 型 的 原生 构造 函数 ， 如 


Fa 


TypeError(..) 和 URIError(..)。 这 些 构 造 函数 很 少 被 直接 使 用 ， 它 们 在 程序 
发 生 异 常 (比如 试图 使 用 未 声明 的 变量 产生 ReferenceError 错误 ) 时 会 被 自 


让 





非 绝 对 )， 用 它 来 命名 对 象 属性 不 容易 导致 重 名 。 该 类 型 的 引入 主要 源 于 ES6 的 一 些 特殊 


构造 ， 此 外 符号 也 可 以 自行 定义 。 





符号 可 以 用 作 属 性 名 ， 但 无 论 是 在 代码 还 是 开发 控制 台中 都 无 法 查看 和 访问 它 的 值 ， 只 会 


显示 为 诸如 Symbol(Symbol.create) 这 样 的 值 。 


ES6 中 有 一 些 预 定义 符号 ， 以 Symbol 的 静态 属性 形式 出 现 ， 如 Symbol.create、Symbol. 


iterator 等 ， 可 以 这 样 来 使 用 : 
obj[Symbol.iterator] = function(){ /*..*/ }; 


我 们 可 以 使 用 Symbol(..) 原生 构造 函数 来 自 定义 符号 。 但 它 比较 特殊 ， 不 能 带 
字 ， 否 则 会 出 错 : 


var mysym = Symbol( "my own symbol" ); 


mysym; // Symbol(my own symbol) 
mysym.toString();  // "Symbol(my own symbol)" 
typeof mysym; // "symbol" 


var a={}; 
a[mysym] = "foobar"; 


Object .getOwnPropertySymbols( a ); 
// [ Symbol(my own symboL) ] 


上 了 8 new 关键 
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虽然 符号 实际 上 并 非 私 有 属性 (通过 0bject.getOwnPropertySymbols(..) 便 可 以 公开 获得 
对 象 中 的 所 有 符号 ) ， 但 它 却 主 要 用 于 私有 或 特殊 属性 。 很 多 开发 人 员 喜 欢 用 它 来 奉 代 有 
下 划 线 (_) 前 级 的 属性 ， 而 下 划 线 前 级 通常 用 于 命名 私有 或 特殊 属性 。 





符号 并 非 对 象 ， 而 是 一 种 简单 标量 基本 类 型 。 





3.4.5 原生 原型 


原生 构造 函数 有 自己 的 .prototype 对 象 ， 如 Array.prototype、String.prototype 等 。 
这 些 对 象 包含 其 对 应 子 类 型 所 特有 的 行为 特征 。 
例如 ， 将 字符 串 值 封装 为 字符 串 对 象 之 后 ， 就 能 访问 String.prototype 中 定义 的 方法 。 








根据 文档 约定 ， 我 们 将 String.prototype.XYZ 简写 为 String#XYZz， 对 其 
他 .prototypes 也 同样 如 此 。 








。 String#indexOf(..) 
在 字符 串 中 找到 指定 子 字符 串 的 位 置 。 


。 String#charAt(..) 
获得 字符 串 指定 位 置 上 的 字符 。 

。 String#substr(..)、String#substring(..) 和 和 String#slice(..) 
获得 字符 串 的 指定 部 分 。 





。 String#toUpperCase() 和 String#toLowerCase() 


将 字符 串 转 换 为 大 写 或 小 写 。 


。 String#trim() 


去 掉 字 符 串 前 后 的 空格 ， 返 回 新 的 字符 串 。 











以 上 方法 并 不 改变 原 字 符 串 的 值 ， 而 是 返回 一 个 新 字符 串 。 





借助 原型 代理 (prototype delegation， 参 见 《 你 不 知道 的 JavaScript (上 卷 )》 的 “this 和 对 
象 原型 ”部 分 )， 所 有 字符 串 都 可 以 访问 这 些 方法 : 








vara= "abc "; 
a.indexOf( "c" ); // 3 
a.toUpperCase(); // "ABC " 
a.trim(); // "abc" 

















其 他 构造 函数 的 原型 包含 它们 各 自 类 型 所 特有 的 行为 特征 ， 比 如 Number#tofixed(..) (将 


数字 转换 为 指定 长 度 的 整数 字符 串 ) 和 Array#concat(..) (合并 数组 )。 i 


调用 Function.prototype 中 的 apply(..)、 


然而 ， 有 些 原生 原型 (native prototype) 二 





call(..) 和 bind(..)。 


Lg 


站 EE 普通 对 象 那么 简单 : 





typeof Function.prototype; 
Function.prototype(); 


RegExp.prototype.toString(); 
"abc" .match( RegExp.prototype ); 





// "function" 


/ 空 函 数 ! 


//[""] 











空 正则 表达 式 





更 糟糕 的 是 ， 我 们 甚至 可 以 修改 它们 (而 不 仅仅 是 添加 属性 ) : 


Array.isArray( Array.prototype ); 
Array.prototype.push( 1, 2, 3 ); 
Array.prototype; 


// true 
// 3 
// [1,2,3] 


// 需要 将 Array.prototype 设 置 回 空 ,否则 会 导致 问题 ! 





Array.prototype.Length = 0; 





这 里 ，Function.prototype 是 一 个 函数 ，RegExp.prototype 是 一 个 正则 表达 式 ， 而 Array. 


prototype 是 一 个 数组 。 是 不 是 很 有 意思 ? 


将 原型 作为 默认 值 


Function.prototype 是 一 个 空 国 数 ，RegExp.prototype 是 一 个 “ 空 ”的 正则 表达 式 (无 


任何 匹配 ) ， 而 Array.prototype 是 一 个 空 
认 值 。 


例如 : 


function isThisCool(vals,fn,rx) { 
vals = vals || Array.prototype; 
fn = fn || Function.prototype; 
rx = rx || RegExp.prototype; 


return rx.test( 
vals.map( fn ).join( "" ) 
); 
} 


isThisCool(); // true 


数组 。 对 未 赋值 的 变量 来 说 ， 它 们 是 很 好 的 默 





isThisCool( 
[on by 
function(v){ return v.toUpperCase(); }, 
/D/ 

中 // false 


从 ES6 开始 ， 我 们 不 再 需要 使 用 vals = vals || .. 这 样 的 方式 来 设置 默认 
值 (参见 第 4 章 )， 因 为 默认 值 可 以 通过 函数 声明 中 的 内 置 语法 来 设置 ( 参 
见 第 5 章 )。 


这 种 方法 的 一 个 好 处 是 .prototypes 已 被 创建 并 且 仅 创建 一 次 。 相 反 ， 如 果 将 []、 
function(){} 和 /(?:)/ 作为 默认 值 ， 则 每 次 调用 isThisCool(..) 时 它们 都 会 被 创建 一 次 
(具体 创建 与 否 取 决 于 JavaScript 引擎 ， 稍 后 它们 可 能 会 被 垃圾 回收 )， 这 样 无 疑 会 造成 内 
存 和 CPU 资源 的 浪费 。 





另外 需要 注意 的 一 点 是 ， 如 果 默 认 值 随后 会 被 更 改 ， 那 就 不 要 使 用 Array.prototype。 上 例 
中 的 vals 是 作为 只 读 变 量 来 使 用 ， 更 改 vals 实际 上 就 是 更 改 Array.prototype， 而 这 样 会 
导致 前 面 提 到 过 的 一 系列 问题 | 











以 上 我 们 介绍 了 原生 原型 及 其 用 途 ， 使 用 它们 时 要 十 分 小 心 ， 特 别 是 要 对 它 
们 进行 更 改 时 。 详 情 请 见 本 部 分 附录 A 中 的 A.4 贡 。 








3.5 小结 


JavaScript 为 基本 数据 类 型 值 提供 了 封装 对 象 ， 称 为 原生 函数 (如 String、Number 、Boolean 
等 )。 它 们 为 基本 数据 类 型 值 提 供 了 该 子 类 型 所 特有 的 方法 和 属性 (如 ;String#trim() 和 


Array#concat(..)), 

















对 于 简单 标量 基本 类 型 值 ， 比 如 "abc"， 如 果 要 访问 它 的 Length 属性 或 String.prototype 
方法 ，JavaScript 引擎 会 自动 对 该 值 进行 封装 ( 即 用 相应 类 型 的 封装 对 象 来 包装 它 ) 来 实 
现 对 这 些 属性 和 方法 的 访问 。 





第 4 章 


强制 类 型 转换 





在 对 JavaScript 的 类 型 和 值 有 了 更 全 面 的 了 解 之 后 ， 本 章 则 在 讨论 一 个 非常 有 和 争议 的 话题 : 
强制 类 型 转换 。 


如 第 1 章 所 述 ， 关 于 强制 类 型 转换 是 一 个 设计 上 的 缺陷 还 是 有 用 的 特性 ， 这 一 争论 从 
JavaScript 诞生 之 日 起 就 开始 了 。 在 很 多 的 JavaScript 书籍 中 强制 类 型 转换 被 说 成 是 危险 、 
星 淮 和 粳 糕 的 设计 。 

















秉承 本 系列 从 书 的 一 贯 宗 时 ， 对 于 不 懂 的 地 方 我 们 应 该 迎 难 而 上 ， 知 其 然 并 且 知 其 所 以 
然 ， 不 会 因为 种 种 传言 和 挫折 就 退 吉 三 舍 。 


本 章 旨 在 全 面 介绍 强制 类 型 转换 的 优 缺 点 ， 让 你 能 够 在 开发 中 合理 地 运用 它 。 


4.1 值 类 型 转换 


将 值 从 一 种 类 型 转换 为 另 一 种 类 型 通常 称 为 类 型 转换 (type casting)， 这 是 显 式 的 情况 ， 隐 
式 的 情况 称 为 强制 类 型 转换 (coercion ) 。 



































JavaScript 中 的 强制 类 型 转换 总 是 返回 标量 基本 类 型 值 (参见 第 2 章 ) ， 如 字 
符 串 、 数 字 和 布尔 值 ， 不 会 返回 对 象 和 函数 。 在 第 3 章 中 ， 我 们 介绍 过 “ 封 
装 *， 就 是 为 标量 基本 类 型 值 封装 一 个 相应 类 型 的 对 象 ， 但 这 并 非 严 格 意义 
上 的 强制 类 型 转换 。 














也 可 以 这 样 来 区 分 : 类 型 转换 发 生 在 静态 类 型 语言 的 编译 阶段 ， 而 强制 类 型 转换 则 发 生 在 
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动态 类 型 语言 的 运行 时 (runtime ) 。 


然而 在 JavaScript 中 通常 将 它们 统称 为 强制 类 型 转换 ， 我 个 人 则 倾向 于 用 “ 隐 式 强制 类 型 
转换 ”(implicit coercion) 和 “ 显 式 强制 类 型 转换 ”(explicit coercion) 来 区 分 。 


二 者 的 区 别 显 而 易 见 : 我 们 能 够 从 代码 中 看 出 哪些 地 方 是 显 式 强制 类 型 转换 ， 而 隐 式 强制 
类 型 转换 则 不 那么 明显 ， 通 常 是 某 些 操作 产生 的 副作用 。 


例如 : 
var a = 42; 
var b=a+t""; // 隐 式 强制 类 型 转换 
var c = String( a ); ”// 显 式 强制 类 型 转换 


对 变量 b 而 言 ， 强 制 类 型 转换 是 隐 式 的 ， 由 于 + 运算 符 的 其 中 一 个 操作 数 是 字符 串 ， 所 以 
是 字符 串 拼接 操作 ， 结 果 是 数字 42 被 强制 类 型 转换 为 相应 的 字符 串 "42"。 


而 String(..) 则 是 将 a 显 式 强制 类 型 转换 为 字符 串 。 
两 者 都 是 将 数字 42 转换 为 字符 串 "42"。 然 而 它们 各 自 不 同 的 处 理 方式 成 为 了 争论 的 焦点 。 











从 技术 角度 来 说 ， 除 了 字面 上 的 差别 以 外 ， 二 者 在 行为 特征 上 也 有 一 些 细微 
的 差别 。 我 们 将 在 4.4.2 节 详 细 介 绍 。 














这 里 的 “ 显 式 ” 和 “ 隐 式 ”以 及 “明显 的 副作用 ”和 “隐藏 的 副作用 ”， 都 是 相对 而 言 的 。 


要 是 你 明白 a + "" 是 怎么 回 事 ， 它 对 你 来 说 就 是 “ 显 式 ”的 。 相 反 ， 如 果 你 不 知道 
String(..) 可 以 用 来 做 字符 串 强制 类 型 转换 ， 它 对 你 来 说 可 能 就 是 “ 隐 式 ”的 。 











我 们 在 这 里 以 普遍 通行 的 标准 来 讨论 “ 显 式 ” 和 “ 隐 式 ”， 而 非 JavaScript 专家 和 规范 的 标 
准 。 如 果 你 的 理解 与 此 有 出 入 ， 请 参照 我 们 的 标准 。 


要 知道 我 们 编写 的 代码 大 都 是 给 别人 看 的 。 即 便 是 JavaScript 高 手 也 需要 顾及 其 他 不 同 水 
平 的 开发 人 员 ， 要 考虑 他 们 是 否 能 读 懂 自己 的 代码 ， 以 及 他 们 对 于 “ 显 式 ”和 “ 隐 式 ”的 
理解 是 否 和 自己 一 致 。 


4.2 ”抽象 值 操作 


介绍 显 式 和 隐 式 强制 类 型 转换 之 前 ， 我 们 需要 掌握 字符 串 、 数 字 和 布尔 值 之 间 类 型 转换 的 
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基本 规则 。ES5 规范 第 9 节 中 定义 了 一 些 “ 抽 人 象 操作 ”( 即 “ 仅 供 内 部 使 用 的 操作 ”) 和 转 
换 规 则 。 这 里 我 们 着 重 介 绍 ToString、ToNumber 和 ToBooLean， 附 带 讲 一 讲 ToPrimitive。 


4.2.1 ToString 
规范 的 9.8 节 中 定义 了 抽象 操作 Tostring， 它 负责 处 理 非 字符 串 到 字符 串 的 强制 类 型 转换 。 
基本 类 型 值 的 字符 串 化 规则 为 :nutLLt 转换 为 "null"，undefined 转换 为 "undefined"，true 


转换 为 “true"。 数 字 的 字符 串 化 则 遵循 通用 规则 ， 不 过 第 2 章 中 讲 过 的 那些 极 小 和 极 大 的 
数字 使 用 指数 形式 : 





// 1.97 连续 乘 以 七 个 1000 
var a = 1.07 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000; 








// 七 个 1006 一 共 21 位 数字 
a.toString(); // "1.07e21" 


普通 对 象 来 说 ， 除 非 自行 定义 ， 耕 则 toString() (0bject.prototype.toString()) 返回 
内 部 属性 [[CLass]] 的 值 (参见 第 3 章 )， 如 "[object 0bject]"。 























然而 前 面 我 们 介绍 过 ， 如 果 对 象 有 自己 的 tostring() 方法 ， 字 符 串 化 时 就 会 调用 该 方法 并 
使 用 其 返回 值 。 














将 对 象 强制 类 型 转换 为 string 是 通过 ToPrimitive 抽象 操作 来 完成 的 (ES5 
规范 ，9.1 节 ) ， 我 们 在 此 略 过 ， 稍 后 将 在 4.2.2 节 中 详细 介绍 。 




















数组 的 默认 tostring() 方法 经 过 了 重新 定义 ， 将 所 有 单元 字符 串 化 以 后 再 用 "," 连接 起 
来 : 
var a = [1,2,3]; 


a.toString(); // "1,2,3" 








tostring() 可 以 被 显 式 调 用 ， 或 者 在 需要 字符 串 化 时 自动 调用 。 


JSON 字符 串 化 
工具 函数 JSON.stringify(..) 在 将 JSON 对 象 序列 化 为 字符 串 时 也 用 到 了 Tostring。 





请 注意 ，JSON 字符 串 化 并 非 严 格 意义 上 的 强制 类 型 转换 ， 因 为 其 中 也 涉及 ToString 的 相 
关 规则 ， 所 以 这 里 顺带 介绍 一 下 。 











对 大 多 数 简单 值 来 说 ，JSON 字符 串 化 和 tostring() 的 效果 基本 相同 ， 只 不 过 序列 化 的 结 
果 总 是 字符 串 : 





JSON.stringify( 42 ); // "42" 

JSON.stringify( "42”); //""42"” (含有 双 引 号 的 字符 串 
JSON.stringify( nuLL ); // "null" 

JSON.stringify( true ); // "true" 





er 





所 有 安全 的 JSON 值 (JSON-safe) 都 可 以 使 用 JSON.stringify(..) 字符 串 化 。 安 全 的 
JSON 值 是 指 能 够 呈现 为 有 效 JSON 格式 的 值 。 


























为 了 简单 起 见 ， 我 们 来 看 看 什么 是 不 安全 的 JSON 值 。undefined、function、symbol 
(ES6+) 和 包含 循环 引用 (对象 之 间 相 互 引 用 ， 形 成 一 个 无 限 循 环 ) 的 对 象 都 不 符合 JSON 
结构 标准 ， 支 持 JSON 的 语言 无 法 处 理 它们 。 




















JSON.stringify(..) 在 对 象 中 遇 到 undefined、function 和 symbol 时 会 自动 将 其 忽略 ， 在 
数组 中 则 会 返回 nuLL (以 保证 单元 位 置 不 变 )。 








例如 : 


JSON.stringify( undefined ); // undefined 
JSON.stringify( function(){} ); // undefined 


JSON.stringify( 
[1,undefined,function(){},4] 
); // "[1,nuLL,nuLL,4]" 
JSON.stringify( 
{ a:2, b:function(){} } 
); // "{"a":2}" 


对 包含 循环 引用 的 对 象 执行 J]SON.stringify(..) 会 出 错 。 

















如 果 对 象 中 定义 了 toJSON() 方法 ，JSON 字符 串 化 时 会 首先 调用 该 方法 ， 然 后 用 它 的 返回 
值 来 进行 序列 化 。 

















如 果 要 对 含有 非法 JSON 值 的 对 象 做 字符 串 化 ， 或 者 对 象 中 的 某 些 值 无 法 被 序列 化 时 ， 就 
需要 定义 toJSON( ) 方法 来 返回 一 个 安全 的 JSON 值 














o 





例如 : 


var o={}; 


var a={ 

bs ‘42, 

i085 

d: function(){} 
}; 
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// 在 a 中 创建 一 个 循环 引用 


o.e = a; 





// 循环 引用 在 这 里 会 产生 错误 
// JSON.stringify( a ); 





// 自 定义 的 JSON 序 列 化 
a.toJSON = function() { 


// 序列 化 仅 包含 b 
return { b: this.b }; 


}; 


JSON.stringify( a ); // "{"b":42}" 





很 多 人 误 以 为 toJSON() 返回 的 是 JSON 字符 串 化 后 的 值 ， 其 实 不 然 ， 除 非 我 们 确实 想 要 对 
字符 串 进行 字符 串 化 〈 通 常 不 会 ! )。toJSON() 返回 的 应 该 是 一 个 适当 的 值 ， 可 以 是 任何 
类 型 ， 然 后 再 由 JSON. stringify(..) 对 其 进行 字符 串 化 。 





























也 就 是 说 ，toJSON() 应 该 “返回 一 个 能 够 被 字符 串 化 的 安全 的 JSON 值 ”， 而 不 是 “返回 
一 个 JSON 字符 串 。 




















例如 : 


var a={ 
val: [1,2,3], 


// 可 能 是 我 们 想 要 的 结果 ! 
toJSON: function(){ 
return this.val.slice( 1 ); 
} 
}; 


var b={ 
val: [1,2,3], 


// 可 能 不 是 我 们 想 要 的 结果 ! 
toJSON: function(){ 
return "[" + 
this.val.slice( 1 ).join() + 
] 1 
} 
}; 


JSON. stringify( a ); // "[2,3]" 

JsON.stringify( b ); // ""[2,3]"" 
这 里 第 二 个 函数 是 对 toJSON 返回 的 字符 串 做 字符 串 化 ， 而 非 数组 本 身 。 
现在 介绍 儿 个 不 太 为 人 所 知 但 却 非常 有 用 的 功能 。 








我 们 可 以 向 JSON.stringify(..) 传递 一 个 可 选 参数 replacer， 它 可 以 是 数组 或 者 函数 ， 用 


来 


间 定 对 象 序 列 化 过 程 中 哪些 属性 应 该 被 处 理 ， 哪 些 应 该 被 排除 ， 和 toJSON() 很 像 。 





如 果 replacer 是 一 个 数组 ， 那 么 它 必 须 是 一 个 字符 串 数组 ， 其 中 包含 序列 化 要 处 理 的 对 象 
的 属性 名 称 ， 除 此 之 外 其 他 的 属性 则 被 名 略 。 


如 果 replacer 是 一 个 函数 ， 它 会 对 对 象 本 身 调用 一 次 ， 然 后 对 对 象 中 的 每 个 属性 各 调用 
一 次 ， 每 次 传递 两 个 参数 ， eg 如 果 要 忽略 革 个 键 就 返回 undefined， 否 则 返回 指定 
的 值 。 





[1,2,3] 
下 


JSON. stringify( a， [bs Se"] ); // {ba2, "eurna2 ry 


JSON.stringify( a, function(k,v){ 
if (k !== "c") return v; 

}); 

// eurbusa2 dst] 


如 果 replacer 是 函数 ， 它 的 参数 k 在 第 一 次 调用 时 为 undefined (就 是 对 对 象 
本 身 调用 的 那 次 )。if 语句 将 属性 "c" 排除 掉 。 由 于 字符 串 化 是 递归 的 ， 因 
此 数组 [1,2,3] 中 的 每 个 元 素 都 会 通过 参数 v 传递 给 replacer， 即 1、2 和 3， 
参数 k 是 它们 的 索引 值 ， 即 9、1 和 2。 

















JSON.string 还 有 一 个 可 选 参数 space， 用 来 指定 输出 的 缩 进 格 式 。space 为 正 整 数 时 是 指定 
每 一 级 缩 进 的 字符 数 ， 它 还 可 以 是 字符 串 ， 此 时 最 前 面 的 十 个 字符 被 用 于 每 一 级 的 缩 进 














var a={ 
b: 42， 
€; "42"; 
ds [1;233] 


a 


JSON.stringify( a, null, 3 ); 
I"{ 

// sad 

// i "42" ， 
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人 
/es "b": 42 
/se "c": "42 
// -----"d":[ 
1/ 1 
1/ ~ 2 
1/ 3 
// -----] 

// 


请 记 住 ，JSON.stringify(..) 并 不 是 强制 类 型 转换 。 在 这 里 介绍 是 因为 它 涉及 ToString 强 
制 类 型 转换 ， 具 体 表现 在 以 下 两 点 。 








(1) 字符 串 、 数 字 、 布 尔 值 和 null 的 JSON.stringify(..) 规则 与 ToString 基本 相同 。 
(2) 如 果 传 递 给 JSON.stringify(..) 的 对 象 中 定义 了 toIJSON() 方法 ， 那 么 该 方法 会 在 字符 
串 化 前 调用 ， 以 便 将 对 象 转换 为 安全 的 JSON 值 。 


4.2.2 ToNumber 

有 时 我 们 需要 将 非 数 字 值 当 作 数字 来 使 用 ， 比 如 数学 运算 。 为 此 ES5 规范 在 9.3 节 定 义 了 
抽象 操作 ToNumber 。 

其 中 true 转换 为 1，false 转换 为 0。undefined 转换 为 NaN，null 转换 为 0。 


ToNumber 对 字符 串 的 处 理 基本 遵循 数字 常量 的 相关 规则 /语法 (参见 第 3 章 )。 处 理 失 败 
时 返回 NaN (处 理 数 字 常 量 失败 时 会 产生 语法 错误 )。 不 同 之 处 是 ToNumber 对 以 9 开头 的 
十 六 进 制 数 并 不 按 十 六 进 制 处 理 (而 是 按 十 进 制 ， 参 见 第 2 章 )。 


























数字 常量 的 语法 规则 与 ToNumber 处 理 字符 串 所 遵循 的 规则 之 间 差 别 不 大 ， 这 
里 不 做 进一步 介绍 ， 可 参考 ES5 规范 的 9.3.1 节 。 





对 象 (包括 数组 ) 会 首先 被 转换 为 相应 的 基本 类 型 值 ， 如 果 返 回 的 是 非 数字 的 基本 类 型 
值 ， 则 再 遵循 以 上 规则 将 其 强制 转换 为 数字 。 


为 了 将 值 转换 为 相应 的 基本 类 型 值 ， 抽 象 操 作 ToPrimitive (参见 ES5 规范 9.1 节 ) 会 首先 
(通过 内 部 操作 pefauLtvaLue， 参 见 ES5 规范 8.12.8 节 ) 检查 该 值 是 否 有 vaLueof() 方法 。 
如 果 有 并 且 返 回 基本 类 型 值 ， 就 使 用 该 值 进行 强制 类 型 转换 。 如 果 没 有 就 使 用 toString() 
的 返回 值 (如 果 存 在 ) 来 进行 强制 类 型 转换 。 

















如 果 value0f() 和 toString() 均 不 返回 基本 类 型 值 ， 会 产生 TypeError 错误 。 
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从 ES5 开始 ， 使 用 0bject.create(null) 创建 的 对 象 [[Prototype]] 属性 为 nutL， 并 且 没 
有 valueof() 和 toString() 方法 ， 因 此 无 法 进行 强制 类 型 转换 。 详 情 请 参考 本 系列 的 《你 
不 知道 的 JavaScript (上 卷 )》》“this 和 对 象 原型 ”部 分 中 [[Prototype]] 相关 部 分 。 





Number(..) 已 经 实现 了 此 功能 。 





例如 : 
var a={ 
valueOf: function(){ 
return "42"; 
} 
}; 
var b={ 
toString: function(){ 
return "42"; 
} 
了 


var C = [4,2]; 
c.toSstring = function(){ 
return this.jotn( "™ ); // "42" 


} 

Number( a ); // 42 
Number( b ); // 42 
Number( c ); // 42 
Number( "" ); // 0 
Number( [] ); // 9 
Number( [ "abc" ] ); // NaN 


4.2.3 ToBoolean 





我 们 稍 后 将 详细 介绍 数字 的 强制 类 型 转换 ， 在 下 面 的 示例 代码 中 我 们 假定 


下 面 介绍 布尔 值 ， 关 于 这 个 主题 存在 许多 误解 和 困惑 ， 需 要 我 们 特别 注意 。 





首先 也 是 最 重要 的 一 点 是 ，JavaScript 中 有 两 个 关键 词 true 和 fatse， 分 别 代表 布尔 类 型 
中 的 真 和 假 。 我 们 常 误 以 为 数值 1 和 9 分 别 等 同 于 true 和 false。 在 有 些 语言 中 可 能 是 这 
样 ， 但 在 JavaScript 中 布尔 值 和 数字 是 不 一 样 的 。 虽 然 我 们 可 以 将 1 强制 类 型 转换 为 true， 





将 9 强制 类 型 转换 为 false， 反 之 亦 然 ， 但 它们 并 不 是 一 








1. 假 值 (falsy value) 
我 们 再 来 看 看 其 他 值 是 如 何 被 强制 类 型 转换 为 布尔 值 的 。 























回 事 。 
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JavaScript 中 的 值 可 以 分 为 以 下 两 类 : 


(1) 可 以 被 强制 类 型 转换 为 false 的 值 
(2) 其 他 (被 强制 类 型 转换 为 true 的 值 ) 





JavaScript 规范 具体 定义 了 一 小 撮 可 以 被 强制 类 型 转换 为 false 的 值 。 


ES5 规范 9.2 节 中 定义 了 抽象 操作 ToBoolean， 列 举 了 布尔 强制 类 型 转换 所 有 可 能 出 现 的 
结果 。 


以 下 这 些 是 假 值 : 





。 Undefined 

。 null 

。 false 

。 +0、-0 和 NaN 


假 值 的 布尔 强制 类 型 转换 结果 为 false。 


从 逻辑 上 说 ， 假 值 列表 以 外 的 都 应 该 是 真 值 (truthy)。 但 JavaScript 规范 对 此 并 没有 明确 
定义 ， 只 是 给 出 了 一 些 示 例 ， 例 如 规定 所 有 的 对 象 都 是 真 值 ， 我 们 可 以 理解 为 假 值 列表 以 
外 的 值 都 是 真 值 。 


2. 假 值 对 象 (falsy object) 
这 个 标题 似乎 有 点 自 相 了 矛盾。 前 面 讲 过 规范 规定 所 有 的 对 象 都 是 真 值 ， 怎 么 还 会 有 假 值 对 
象 呢 ? 


bl 


有 人 可 能 会 以 为 假 值 对 象 就 是 包装 了 假 值 的 封装 对 象 (如 ""、9 和 false， 参 见 第 3 章 )， 


这 只 是 规范 开 的 一 个 小 玩笑 。 





例如 : 


var a = new Boolean( false ); 
var b = new Number( 0 ); 
var C = new String( "" ); 


它们 都 是 封装 了 假 值 的 对 象 (参见 第 3 章 )。 那 它们 究竟 是 true 还 是 false 呢 ? 答案 很 简单 
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邮 


var d = Boolean( a && b && c ); 


d; // true 
d 为 true, 说 明 a、b、c 都 为 true。 
请 注意 ， 这 里 Boolean(..) 对 a && b && c 进 行 了 封装 ， 有 人 可 能 会 问 为 什 


么 。 我 们 暂且 记 下 ， 稍 后 会 作 说 明 。 你 可 以 试 试 不 用 Boolean(..) 的 话 d = a 
8&& b && < 会 产生 什么 结果 。 








如 有 果 假 值 对 象 并 非 封 装 了 假 值 的 对 象 ， 那 它 究竟 是 什么 ? 





值得 注意 的 是 ， 虽 然 JavaScript 代码 中 会 出 现 假 值 对 象 ， 但 它 实 际 上 并 不 属于 JavaScript 语 
言 的 范畴 。 











浏览 器 在 某 些 特定 情况 下 ， 在 常规 JavaScript 语法 基础 上 自己 创建 了 一 些 外 来 (exotic) 
值 ， 这 些 就 是 “ 假 值 对 象 ”。 





假 值 对 象 看 起 来 和 普通 对 象 并 无 二 致 (都 有 属性 ， 等 等 ) ， 但 将 它们 强制 类 型 转换 为 布尔 
值 时 结果 为 false。 


最 常见 的 例子 是 document.all， 它 是 一 个 类 数组 对 象 ， 包 含 了 页 面 上 的 所 有 元 素 ， 由 
DOM (而 不 是 JavaScript 引擎 ) 提供 给 JavaScript 程序 使 用 。 它 以 前 曾 是 一 个 真正 意义 上 
的 对 象 ， 布 尔 强制 类 型 转换 结果 为 true， 不 过 现在 它 是 一 个 假 值 对 象 。 


document.all 并 不 是 一 个 标准 用 法 ， 早 就 被 废止 了 。 





有 人 也 许 会 问 :“ 既 然 这 样 的 话 ， 浏 览 器 能 否 将 它 彻底 去 掉 ? ”这 个 想法 是 好 的 ， 只 不 过 
仍然 有 很 多 JavaScript 程序 在 使 用 它 。 

那 为 什么 它 要 是 假 值 呢 ? 因为 我 们 经 常 通 过 将 document.all 强制 类 型 转换 为 布尔 值 (比如 
在 if 语句 中 ) 来 判断 浏览 器 是 否 是 老 版 本 的 了 正 。 正 自 诞生 之 日 起 就 始终 遵循 浏览 器 标准 ， 
较 其 他 浏览 器 更 为 有 力 地 推动 了 Web 的 发 展 。 











if(document.all) { /* it’s IE */ } 依然 存在 于 许多 程序 中 ， 也 许 会 一 直 存 在 下 去 ， 这 对 
下 的 用 户 体验 来 说 不 是 一 件 好 事 。 


虽然 我 们 无 法 彻底 摆脱 document.all， 但 为 了 让 新 版 本 更 符合 标准 ，IE 并 不 打算 继续 支持 
if (document.all) { .. }。 


“ 那 我 们 应 该 怎么 办 ? ” 
“也 许可 以 修改 JavaScript 的 类 型 机 制 ， 将 document ,alt 作为 假 值 来 处 理 ! ” 
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这 并 不 是 一 个 好 办 法 。 大 多 数 JavaScript 开发 人 员 对 这 个 坑 了 解 得 不 多 ， 不 过 更 糟糕 的 还 


是 对 其 置 若 闫 闻 的 态度 。 


3. 真 值 (truthy value) 
真 值 就 是 假 值 列表 之 外 的 值 。 














例如 : 


var d = Boolean( a && b && c ); 


这 里 d 应 该 是 true 还 是 false 呢 ? 
答 
































假 值 列表 中 唯一 的 字符 串 。 








再 如 : 
var a = []; // 空 数组 一 一 是 真 值 还 是 假 值 ? 
var b = {}; // 空 对 象 一 一 是 真 值 还 是 假 值 ? 
var c = function(){}; // 空 函 数 一 一 是 真 值 还 是 假 值 ? 


var d = Boolean( a && b && c ); 


d 依然 是 true。 还 是 同样 的 道理 ，[]、 人 人 和 function(){} 都 不 在 假 值 列 表 中 
是 真 值 。 








案 是 true。 上 例 的 字符 串 看 似 假 值 ， 但 所 有 字符 串 都 是 真 值 。 不 过 "" 除外 ， 因 为 它 是 





， 因 此 它们 都 





也 就 是 说 真 值 列表 可 以 无 限 长 ， 无 法 一 一 列举 ， 所 以 我 们 只 能 用 假 值 列 表 作 为 参考 。 





你 可 以 花 五 分 钟 时 间 将 假 值 列表 写 出 来 贴 在 显示 器 上 ， 或 者 记 在 脑子 里 ， 夏 
假 值 的 时 候 就 可 以 派 上 用 场 。 


掌握 真 / 候 值 的 重点 在 于 理解 布尔 强制 类 型 转换 ( 显 式 和 隐 式 ) ， 在 此 基础 上 
制 类 型 转换 示例 进行 深入 介绍 。 
4.3 显 式 强制 类 型 转换 


显 式 强制 类 型 转换 是 那些 显而易见 的 类 型 转换 ， 很 多 类 型 转换 都 属于 此 列 。 








Pn 





























我 们 在 编码 时 应 尽 可 能 地 将 类 型 转换 表达 清楚 ， 以 免 给 别人 留 坑 。 类 型 转换 








需要 判断 真 / 


我 们 就 能 对 强 





越 清晰 ， 代 码 
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可 读 性 越 高 ， 更 容易 理解 。 
对 显 式 强 制 类 型 转换 几乎 不 存在 非议 ， 它 类 似 于 静态 语言 中 的 类 型 转换 ， 已 被 广泛 接受 ， 
不 会 有 什么 坑 。 我 们 后 面 会 再 讨论 这 个 话题 。 


4.3.1 字符 串 和 数字 之 间 的 显 式 转换 


我 们 从 最 常见 的 字符 串 和 数字 之 间 的 强制 类 型 转换 开始 。 








字符 串 和 数字 之 间 的 转换 是 通过 String(..) 和 Number(..) 这 两 个 内 建国 数 (原生 构造 国 
数 ， 参 见 第 3 章 ) 来 实现 的 ， 请 注意 它们 前 面 没 有 new 关键 字 ， 并 不 创建 封装 对 象 。 


下 面 是 两 者 之 间 的 显 式 强制 类 型 转换 : 




















var a = 42; 
var b = String( a ); 


Var c 3 
var d = Number( c ); 


be fa 
d; // 3.14 

String(..) 遵循 前 面 讲 过 的 Tostring 规则 ， 将 值 转换 为 字符 串 基本 类 型 。Number(..) 遵循 

前 面 讲 过 的 ToNumber 规则 ， 将 值 转换 为 数字 基本 类 型 。 


它们 和 静态 语言 中 的 类 型 转换 很 像 ， 一 目 了 然 ， 所 以 我 们 将 它们 归 为 显 式 强制 类 型 转换 。 


例如 ， 在 C/C++ 中 可 以 使 用 (int)x 或 int(x) 将 x 转换 为 整数 。 大 部 分 人 倾向 于 后 者 ， 因 
为 它 看 起 来 更 像 函 数 调用 。JavaScript 中 的 Number(x) 与 此 十 分 类 似 ， 至 于 它 是 否 真是 一 个 
国 数 并 不 重要 。 





一 | 




















除了 string(..) 和 Number(..) 以 外 ， 还 有 其 他 方法 可 以 实现 字符 串 和 数字 之 间 的 显 式 
转换 : 


var a = 42; 

var b = a.toString(); 
Va eS 4 

var d = +c; 

b; // rs 

ds ff 3 Lad 


a.toString() 是 显 式 的 (“toString” 意 为 “to a string”)， 不 过 其 中 涉及 隐 式 转换 。 因 为 
toString() 对 42 这 样 的 基本 类 型 值 不 适用 ， 所 以 JavaScript 引擎 会 自动 为 42 创建 一 个 封 
装 对 象 (参见 第 3 章 ) ， 然 后 对 该 对 象 调 用 toString()。 这 里 显 式 转换 中 含有 隐 式 转换 。 
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上 例 中 +c 是 + 运算 符 的 一 元 (unary) 形式 〈 即 只 有 一 个 操作 数 )。+ 运算 符 显 式 地 将 c< 转 
换 为 数字 ， 而 非 数字 加 法 运算 〈 也 不 是 字符 串 拼 接 ， 见 下 )。 

+c 是 显 式 还 是 隐 式 ， 取 决 于 你 自己 的 理解 和 经 验 。 如 果 你 已 然 知道 一 元 运算 符 + 会 将 操作 
数 显 式 强 制 类 型 转换 为 数字 ， 那 它 就 是 显 式 的 。 如 果 不 明 就 里 的 话 ， 它 就 是 隐 式 强制 类 型 
转换 ， 让 你 摸 不 着 头脑 。 





在 JavaScript 开源 社区 中 ， 一 元 运算 + 被 普遍 认为 是 显 式 强制 类 型 转换 。 








不 过 这 样 有 时 候 也 容易 产生 误会 。 例 如 : 





var C = "3.14"; 
var d = 5+ +C; 


d; // 8.14 
一 元 运算 符 - 和 + 一 样 ， 并 且 它 还 会 反 转 数 字 的 符号 位 。 由 于 -- 会 被 当 作 递减 运算 符 来 处 
理 ， 所 以 我 们 不 能 使 用 -- 来 撤销 反 转 ， 而 应 该 像 - -"3.14" 这 样 ， 在 中 间 加 一 个 空格 ， 才 
能 得 到 正确 结果 3.14。 


运算 符 的 一 元 和 二 元 形式 的 组 合 你 也 许 能 够 想到 很 多 种 情况 ， 下 面 是 一 个 疯狂 的 例子 : 


1+-+++-+1; //2 




















尽量 不 要 把 一 元 运算 符 + (还 有 -) 和 其 他 运算 符 放 在 一 起 使 用 。 上 面 的 代码 可 以 运行 ， 
但 非常 粳米。 此 外 d = +c (还 有 d =+ c) 也 容易 和 d += < 搞 混 ， 两 者 天 壤 之 别 。 


一 元 运算 符 + 紧 挨 着 ++ 和 -- 也 很 容易 引起 混淆 。 例 如 a ++tb、a + ++b 和 a 
+ + +b。 关 于 ++， 请 参见 5.1.2 节 。 


我 们 的 目的 是 让 代码 更 清晰 、 更 易 懂 ， 而 非 适 得 其 反 。 


1. 日 期 显 式 转换 为 数字 
一 元 运算 符 + 的 另 一 个 常见 用 途 是 将 日 期 (Date) 对 象 强 制 类 型 转换 为 数字 ， 返 回 结果 为 
Unix 时 间 戳 ， 以 微 秒 为 单位 (从 1970 年 1 月 1 日 00:00:00 UTC 到 当前 时 间 ) : 








Le 





var d = new Date( "Mon, 18 Aug 2014 08:53:06 CDT" ); 


+d; // 1408369986000 





58 | 第 4 章 


我 们 常用 下 面 的 方法 来 获得 当前 的 时 间 惟 ， 例 如 





var timestamp = +new Date(); 


JavaScript 有 一 处 奇特 的 语法 ， 即 构造 函数 没有 参数 时 可 以 不 用 带 ()。 于 是 
我 们 可 能 会 碰 到 var timestamp = +new Date; 这 样 的 写法 。 这 样 能 否 提 高 代 
码 可 读 性 还 存在 争议 ， 因 为 这 仅 用 于 new fn()， 对 一 般 的 函数 调用 fn() 并 
不 适用 。 


























3 


秆 日 期 对 象 转换 为 时 间 改 并 非 只 有 强制 类 型 转换 这 一 种 方法 ， 或 许 使 用 更 显 式 的 方法 会 更 
好 一 些 ，; 
var timestamp = new Date().getTime(); 


// var timestamp = (new Date()).getTime(); 
// var timestamp = (new Date).getTime(); 


不 过 最 好 还 是 使 用 ES5 中 新 加 入 的 静态 方法 Date.now(): 
var timestamp = Date.now(); 
为 老 版 本 浏览 器 提供 Date.now() 的 polyfill 也 很 简单 


if (!Date.now) { 
Date.now = function() { 
return +new Date(); 
}; 
} 
我 们 不 建议 对 日 期 类 型 使 用 强制 类 型 转换 ， 应 该 使 用 Date.now() 来 获得 当前 的 时 间 改 ， 使 
用 new Date(..).getTime() 来 获得 指定 时 间 的 时 间 惟 。 


2. 奇特 的 ~ 运算 符 

一 个 常 被 人 忽视 的 地 方 是 ~ 运算 符 〈 即 字 位 操作 “ 非 ") 相关 的 强制 类 型 转换 ， 它 很 让 人 
费解 ， 以 至 于 了 解 它 的 开发 人 员 也 常常 对 其 敬而远之 。 秉 承 本 书 的 一 贯 宗 虽 ， 我 们 在 此 次 
入 探讨 一 下 ~ 有 哪些 用 处 。 


在 2.3.5 节 中 ， 我 们 讲 过 字 位 运算 符 只 适用 于 32 位 整数 ， 运 算 符 会 强制 操作 数 使 用 32 位 
格式 。 这 是 通过 抽象 操作 ToInt32 来 实现 的 (ES5 规范 9.5 节 )。 


ToInt32 首先 执行 ToNumber 强制 类 型 转换 ， 比 如 "123" 会 先 被 转换 为 123， 然 后 再 执行 
ToInt32, 








虽然 严格 说 来 并 非 强 制 类 型 转换 (因为 返回 值 类 型 并 没有 发 生变 化 )， 但 字 位 运算 符 (如 | 
和 ~) 和 某 些 特殊 数字 一 起 使 用 时 会 产生 类 似 强 制 类 型 转换 的 效果 ， 返 回 另 外 一 个 数字 。 











强制 类 型 转换 | 59 


例如 | 运算 符 〈 字 位 操作 “或 ”) 的 空 操 作 (no-op) 9 | x， 它 仅 执行 ToInt32 转换 (第 2 
章 中 介绍 过 ) : 


Infinity;  // 0 
-Infinity; // 0 


以 上 这 些 特殊 数字 无 法 以 32 位 格式 呈现 (因为 它们 来 自 64 位 IEEE 754 标准 ， 参 见 第 2 
章 )， 因 此 ToInt32 返回 0。 











关于 9 | 是 显 式 还 是 隐 式 仍 存 在 争议 。 从 规范 的 角度 来 说 它 无 疑 是 显 式 的 ， 但 如 果 对 
字 位 运算 符 没 有 这 样 深 入 的 理解 ， 它 可 能 就 是 隐 式 的 。 为 了 前 后 保持 一 臻 ， 我 们 这 里 将 其 
视 为 显 式 。 


再 回 到 ~。 它 首先 将 值 强制 类 型 转换 为 32 位 数字 ， 然 后 执行 字 位 操作 “ 非 ”( 对 每 一 个 字 
位 进行 反 转 )。 





这 与 ! 很 相像 ， 不 仅 将 值 强 制 类 型 转换 为 布尔 值 <， 还 对 其 做 字 位 反 转 ( 参 
见 4.3.3 节 )。 








字 位 反 转 是 个 很 星 淮 的 主题 ，JavaScript 开发 人 员 一 般 很 少 需 要 关心 到 字 位 级 别 。 


对 ~ 还 可 以 有 另外 一 种 诠释 ， 源 自 早期 的 计算 机 科学 和 离散 数学 : ~ 返回 2 的 补 码 。 这 样 
一 来 问题 就 清楚 多 了 ! 


~x 大 致 等 同 于 -(x+1)。 很 奇怪 ,但 相对 更 容易 说 明 问 题 : 





~42;  // -(42+1) ==> -43 
也 许 你 还 是 没有 完全 和 弄 明 白 ~ 到 底 是 什么 玩意 ? 为 什么 把 它 放 在 强制 类 型 转换 一 章 中 介 
绍 ? 稍 安 勿 躁 。 


在 -(x+1) 中 唯一 能 够 得 到 6 (或 者 严格 说 是 -9) 的 x 值 是 -1。 也 就 是 说 如 果 x 为 -1 时 ，~ 
和 一 些 数字 值 在 一 起 会 返回 假 值 6， 其 他 情况 则 返回 真 值 。 




















然而 这 与 我 们 讨论 的 内 容 有 什么 关系 呢 ? 


-1 是 一 个 “ 哨 位 值 ”， 哨 位 值 是 那些 在 各 个 类 型 中 (这 里 是 数字 ) 被 赋予 了 特殊 含义 的 值 。 
在 C 语 言 中 我 们 用 -1 来 代表 函数 执行 失败 ， 用 大 于 等 于 9 的 值 来 代表 函数 执行 成 功 。 








JavaScript 中 字符 串 的 indexof(..) 方法 也 遵循 这 一 惯例 ， 该 方法 在 字符 串 中 搜索 指定 的 子 
字符 串 ， 如 果 找 到 就 返回 子 字 符 串 所 在 的 位 置 (从 0 开始 ) ， 否 则 返回 -1。 





indexof(..) 不 仅 能 够 得 到 子 字符 串 的 位 置 ， 还 可 以 用 来 检查 字符 串 中 是 否 包含 指定 的 子 
字符 串 ， 相 当 于 一 个 条 件 判 断 。 例 如 : 








var a = "Hello World"; 


if (a.indexOf( "lo" ) >= 0) { // true 
// 找到 匹配 ! 


} 
if (a.indexOf( "Lo" ) != -1) { // true 
// 找到 匹配 ! 





if (a.indexOf( "ol" ) < 0) { // true 
// 没有 找到 匹配 ! 


if (a.indexOf( "ol" ) == -1) { // true 
// 没有 找到 匹配 ! 





>= 0 和 == -1 这样 的 写法 不 是 很 好 ， 称 为 “抽象 渗 漏 "， 意 思 是 在 代码 中 暴露 了 底层 的 实 
现 细节 ， 这 里 是 指 用 -1 作为 失败 时 的 返回 值 ， 这 些 细节 应 该 被 屏蔽 掉 。 








现在 我 们 终于 明白 ~ 有 什么 用 处 了 ! ~ 和 indexof() 一 起 可 以 将 结果 强制 类 型 转换 (实际 
上 仅仅 是 转换 ) 为 真 / 假 值 : 





var a = "Hello World"; 
~a.indexOf( "lo" ); // -4 <-- 真 值 ! 


if (~a.indexOf( "lo" )) { // true 
// 找到 匹配 ! 
} 


~a.indexof( "ol" ); //9 <-- 假 值 ! 
!~a.indexOf( "ol" ); // true 


if (!~a.indexOf( "ol" )) { // true 
// 没有 找到 匹配 ! 
} 





如 果 index0f(..) 返回 -1，~ 将 其 转换 为 假 值 9，， 基 他 情况 一 律 转 换 为 真 值 。 











由 -(x+1) 推断 ~-1 的 结果 应 该 是 -90， 然 而 实际 上 结果 是 6。， 因 为 它 是 字 位 操 
作 而 非 数 学 运算 。 
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从 技术 角度 来 说 ，if (~a.index0f(..)) 仍然 是 对 indexof(.) 的 返回 结果 进行 隐 式 强制 类 
型 转换 ，9 转换 为 false， 其 他 情况 转换 为 true。 但 我 觉得 ~ 更 像 显 式 强 制 类 型 转换 ， 前 


提 是 我 对 它 有 充分 的 理解 。 
个 人 认为 ~ 比 >=0 和 == -1 更 简洁 。 


3. 字 位 截 除 
一 些 开 发 人 员 使 用 ~~ 来 截 除数 字 值 的 小 数 部 分 ， 以 为 这 和 Math.floor(. 
实际 上 并 非 如 此 。 


.) 的 效果 一 样 ， 





一 中 的 第 一 个 ~ 执行 ToInt32 并 反 转 字 位 ， 然 后 第 二 个 ~ 再 进行 一 次 字 位 反 转 ， 即 将 所 有 


字 位 反 转 回 原 值 ， 最 后 得 到 的 仍然 是 ToInt32 的 结果 。 





~~ 和 !! 很 相似 ,我们 将 在 4.3.3 节 中 介绍 。 

















对 ~~ 我 们 要 多 加 注意 。 首 先 它 只 适用 于 32 位 数字 ， 更 重要 的 是 它 对 负数 的 处 理 与 Math. 


floor(..) 不同 。 


Math.fLoor( -49.6 ); // -50 
~~-49.6; // -49 


~~x 能 将 值 截 除 为 一 个 32 位 整数 ，x | 9 也 可 以 ， 而 且 看 起 来 还 更 简洁 。 
出 于 对 运算 符 优先 级 〈 详 见 第 5 章 ) 的 考虑 ， 我 们 可 能 更 倾向 于 使 用 ~~x: 
~~1E20 / 10; // 166199296 


1E20 | 0 / 10; // 1661992960 
(1E20 | 0) / 10;  // 166199296 


我 们 在 使 用 ~ 和 ~~ 进行 此 类 转换 时 需要 确保 其 他 人 也 能 够 看 得 懂 。 


4.3.2 ” 显 式 解析 数字 字符 串 
解析 字符 串 中 的 数字 和 将 字符 串 强 制 类 型 转换 为 数字 的 返回 结果 都 是 数字 
两 者 之 间 还 是 有 明显 的 差别 。 





























例如 : 


var a = "42"; 
var b = "42px"; 





。 但 解析 和 转换 
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Number( a ); // 42 
parseInt( a ); // 42 


Number( b ); // NaN 
parseInt( b ); // 42 


解析 允许 字符 串 中 含有 非 数 字 字 符 ， 解 析 按 从 左 到 右 的 顺序 ， 如 果 遇 到 非 数字 字符 就 停 
止 。 而 转换 不 允许 出 现 非 数字 字符 ， 否 则 会 失败 并 返回 NaN。 


解析 和 转换 之 间 不 是 相互 替代 的 关系 。 它 们 虽然 类 似 ， 但 各 有 各 的 用 途 。 如 果 字 符 串 右边 
的 非 数字 字符 不 影响 结果 ， 就 可 以 使 用 解析 。 而 转换 要 求 字符 串 中 所 有 的 字符 都 是 数字 ， 
像 "42px" 这 样 的 字符 串 就 不 行 。 

















解析 字符 串 中 的 浮 点 数 可 以 使 用 parseFloat(..) 函数 。 








不 要 忘 了 parseInt(..) 针对 的 是 字符 串 值 。 向 parseInt(..) 传递 数字 和 其 他 类 型 的 参数 是 
没有 用 的 ， 比 如 true、function(){...} 和 [1,2,3]。 


非 字符 串 参数 会 首先 被 强制 类 型 转换 为 字符 串 〈 参 见 4.2.1 节 )， 依 赖 这 样 的 隐 式 强制 类 型 
转换 并 非 上 策 ， 应 该 避免 向 parseInt(..) 传递 非 字 符 串 参数 。 


ES5 之 前 的 parseInt(..) 有 一 个 坑 导 致 了 很 多 bug。 即 如 果 没 有 第 二 个 参数 来 指定 转换 的 
基数 〈 又 称 为 radix)，parseInt(..) 会 根据 字符 串 的 第 一 个 字符 来 自行 决定 基数 。 


如 果 第 一 个 字符 是 x 或 X， 则 转换 为 十 六 进 制 数字 。 如 果 是 9， 则 转换 为 八进制 数字 。 
以 x 和 X 开 头 的 十 六 进 制 相 对 来 说 还 不 太 容 易 搞 错 ， 而 八进制 则 不 然 。 例 如 : 








var hour = parseInt( selectedHour .vaLue ); 
var minute = parseInt( seLectedMinute.vaLue ); 


console. log( 
"The time you selected was: " + hour + ":" + minute 
); 
上 面 的 代码 看 似 没有 问题 ， 但 是 当 小 时 为 08、 分 钟 为 99 时， 结果 是 9:0 
是 有 效 的 八进制 数 。 


将 第 二 个 参数 设置 为 18， 即 可 避免 这 个 问题 : 




















因为 8 和 9 都 不 


var hour = parseInt( seLectedHour .vaLue，10 ); 
var minute = parseInt( selectedMiniute.value, 10 ); 
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从 ES5 开始 parseInt(..) 默认 转换 为 十 进 制 数 ， 除 非 另外 指定 。 如 有 果 你 的 代码 需要 在 ES5 
之 前 的 环境 运行 ， 请 记得 将 第 二 个 参数 设置 为 10。 


解析 非 字符 串 
曾经 有 人 发 帖 吐槽 过 parseInt(..) 的 一 个 坑 : 


parseInt( 1/0，19 ); // 18 
































很 多 人 想当然 地 以 为 (实际 上 大 错 特 错 )“ 如 果 第 一 个 参数 值 为 Infinity， 解 析 结 果 也 应 
该 是 Infinity”， 返 回 18 也 太 无 厘 头 了 。 








尽管 这 个 例子 纯 属 虚构 ， 我 们 还 是 来 看 看 JavaScript 是 否 真 的 这 样 无 厘 头 。 














其 中 第 一 个 错误 是 向 parseInt(..) 传递 非 字符 串 ， 这 完全 是 在 自 找 麻烦 。 此 时 JavaScript 
会 将 参数 强制 类 型 转换 为 它 能 够 处 理 的 字符 串 。 











有 人 可 能 会 觉得 这 不 合理 ，parseInt(..) 应 该 拒绝 接受 非 字 符 串 参数 。 但 如 果 这 样 的 话 ， 
它 是 否 应 该 抛 出 一 个 错误 ?这 是 Java 的 做 法 。 一 想到 JavaScript 代码 中 到 处 是 抛 出 的 错 
误 ， 要 在 每 个 地 方 加 上 try. .catch， 我 整个 人 都 不 好 了 。 


那 是 不 是 应 该 返回 NaN ? 也 许 吧 ， 但 是 下 面 的 情况 是 否 应 该 运行 失败 ? 


parseInt( new String( "42") ); 




















因为 它 的 参数 也 是 一 个 非 字 符 串 。 如 果 你 认为 此 时 应 该 将 String 封装 对 象 拆 封 (unbox) 
为 "42"， 那 么 将 42 先 转换 为 "42" 再 解析 回 42 不 也 合情合理 吗 ? 


这 种 半 显 式 、 半 隐 式 的 强制 类 型 转换 很 多 时 候 非 常 有 用 。 例 如 : 








var a={ 
num: 21， 
toString: function() { return String( this.num * 2 ); } 


}; 


parseInt( a ); // 42 








parseInt(..) 先 将 参数 强制 类 型 转换 为 字符 串 再 进行 解析 ， 这 样 做 没有 任何 问题 。 因 为 传 
递 错 误 的 参数 而 得 到 错误 的 结果 ， 并 不 能 归咎 于 函数 本 身 。 









































怎么 来 处 理 Infintty (1/8 的 结果 ) 最 合理 呢 ? 有 两 个 选择 : "Infintty" 和 "ew"，JavaScript 
选择 的 是 "Infinity"。 








JavaScript 中 所 有 的 值 都 有 一 个 默认 的 字符 串 形式 ， 这 很 不 错 ， 能 够 方便 我 们 调试 。 


再 回 到 基数 19， 这 显然 是 个 玩笑 话 ， 在 实际 的 JavaScript 代码 中 不 会 用 到 基数 19。 它 的 有 
效 数字 字符 范围 是 9-9 和 a-i (区 分 大 小 写 )。 
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parseInt(1/0，19) 实际 上 是 parseInt("Infinity"，19)。 第 一 个 字符 是 "I"， 以 19 为 基数 
时 值 为 18。 第 二 个 字符 "n" 不 是 一 个 有 效 的 数字 字符 ， 解 析 到 此 为 止 ， 和 "42px" 中 的 "p" 
二 样 8 

最 后 的 结果 是 18， 而 非 Infinity 或 者 报错 。 所 以 理解 其 中 的 工作 原理 对 于 我 们 学 习 
JavaScript 是 非常 重要 的 。 


此 外 还 有 一 些 看 起 来 奇怪 但 实际 上 解释 得 通 的 例子 : 












































parseInt( 0.000008 ); // 0 ("ge" 来 自 于 "0.000008") 
parseInt( 0.0000008 ); // 8 ("8" 来 自 于 "8e-7") 
parseInt( false, 16 ); // 250 ("fa" 来 自 于 "false") 
parseInt( parseInt, 16 ); // 15 ("f" 来 自 于 "function..") 
parseInt( "QOx10" ); // 16 

parseInt( "103", 2 ); {22 


其 实 parseInt(..) 函数 是 十 分 靠 谱 的 ， 只 要 使 用 得 当 就 不 会 有 问题 。 因 为 使 用 不 当 而 导致 
一 些 莫名 其 妙 的 结果 ， 并 不 能 归 和 个 于 JavaScript 本 身 。 


4.3.3 显 式 转换 为 布尔 值 
现在 我 们 来 看 看 从 非 布尔 值 强制 类 型 转换 为 布尔 值 的 情况 。 


与 前 面 的 String(..) 和 Number(..) 一 样 ，BooLean(..) (不 带 new) 是 显 式 的 ToBoolean 强 
制 类 型 转换 : 























var a= "0"; 
var b = []; 
var c= {}; 
var d= ""; 
var e = 0; 
var f = null; 
var g; 


Boolean( a ); // true 
Boolean( b ); // true 
Boolean( c ); // true 


Boolean( d ); // false 
Boolean( e ); // false 
Boolean( f ); // false 
Boolean( g ); // false 


虽然 Boolean(..) 是 显 式 的 ， 但 并 不 常用 。 


和 前 面 讲 过 的 + 类似， 一 元 运算 符 ! 显 式 地 将 值 强制 类 型 转换 为 布尔 值 。 但 是 它 同时 还 将 
真 值 反 转 为 假 值 (或 者 将 假 值 反 转 为 真 值 )。 所 以 显 式 强制 类 型 转换 为 布尔 值 最 常用 的 方 
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法 是 !!， 因 为 第 二 个 ! 会 将 结果 反 转 回 原 值 : 


var a= "0"; 
var b = []; 
var c= {}; 
var d= ""; 
var e = 0; 
var f = null; 
var g; 


!1a; // true 
1!b; // true 
Mes // true 


11!d; // false 
!le; // false 
11f; // false 
!1g; // false 


在 if(..).. 这 样 的 布尔 值 上 下 文中 ， 如 果 没 有 使 用 Boolean(..) 和 !!， 就 会 自动 隐 式 地 进 
行 ToBoolean 转换 。 建 议 使 用 Boolean(..) 和 !! 来 进行 显 式 转换 以 便 让 代码 更 清晰 易 读 。 








显 式 ToBoolean 的 另外 一 个 用 处 ， 是 在 JSON 序列 化 过 程 中 将 值 强 制 类 型 转换 为 true 或 
false.: 





var a=[ 
1 
function(){ /*..*/ }, 
25 


function(){ /*..*/ } 
]; 


JSON.stringify( a ); // "[1,nuLL,2,nuLL]" 


JSON.stringify( a, function(key,val){ 
if (typeof val == "function") { 
// 函数 的 ToBoolean 强 制 类 型 转换 
return !!val; 
} 
else { 
return val; 


J} 


); 
// "[1,true,2,true]" 





村 


掉 的 语法 对 于 熟悉 Java 的 人 并 不 陌生 : 














var a = 42; 


var b =a? true : false; 




















三 元 运算 符 ? : 判断 a 是否 为 真 ， 如 果 是 则 将 变量 b 赋值 为 true， 否 则 赋值 为 false。 
表面 上 这 是 一 个 显 式 的 ToBoolean 强制 类 型 转换 ， 因 为 返回 结果 是 true 或 者 false。 


然而 这 里 涉及 隐 式 强制 类 型 转换 ， 因 为 a 要 首先 被 强制 类 型 转换 为 布尔 值 才能 进行 条 件 判 
断 。 这 种 情况 称 为 “ 显 式 的 隐 式 ”"， 有 百 害 而 无 一 益 ， 我 们 应 彻底 杜绝 。 


建议 使 用 Boolean(a) 和 !4a 来 进行 显 式 强制 类 型 转换 。 


4.4 隐 式 强制 类 型 转换 


隐 式 强制 类 型 转换 指 的 是 那些 隐藏 的 强制 类 型 转换 ， 副 作用 也 不 是 很 明显 。 换 名 话说 ， 你 
自己 觉得 不 够 明显 的 强制 类 型 转换 都 可 以 算 作 隐 式 强制 类 型 转换 。 


显 式 强制 类 型 转换 则 在 让 代码 更 加 清晰 易 读 ， 而 隐 式 强制 类 型 转换 看 起 来 就 像 是 它 的 对 江 
面 ， 会 让 代码 变 得 星 泡 难 懂 。 


对 强制 类 型 转换 的 诉 病 大 多 是 针对 隐 式 强制 类 型 转换 。 























《JavaScript 语言 精粹 》 的 作者 Douglas Crockford 在 许多 场合 和 文章 中 都 主张 
不 要 使 用 强制 类 型 转换 ， 认 为 其 非常 糟糕 。 然 而 他 的 代码 中 也 大 量 使 用 了 隐 
式 和 显 式 强制 类 型 转换 。 实 际 上 他 的 吐槽 大 部 分 是 针对 == 运算 符 ， 但 读 完 
本 章 你 会 发 现 这 只 是 强制 类 型 转换 的 冰山 一 角 。 



























































剖 题 是 ， 隐 式 强 制 类 型 转换 真是 如 此 不 堪 吗 ? 它 是 不 是 JavaScript 语言 的 设计 缺陷 ? 我 们 
是 否 应 该 对 其 退 避 三 舍 ? 


估计 大 多 数 读 者 会 回答 “是 的 "。 其 实 不 然 ， 请 容 我 细 细 道 来 。 


i 上 我 们 从 另 一 个 角度 来 看 待 隐 式 强制 类 型 转换 ， 看 看 它 究 竟 为 何 物 、 该 如 何 使 用 ， 不 要 简 
单 地 把 它 当 作 “ 显 式 强制 类 型 转换 的 对 立 面 "， 因 为 这 样 理解 过 于 狭隘 ,忽略 了 它们 之 间 
一 个 细微 却 十 分 重要 的 区 别 。 


隐 式 强制 类 型 转换 的 作用 是 减少 元 余 ， 让 代码 更 简洁 。 


4.4.1 隐 式 地 简化 


我 们 先 来 看 一 个 例子 ， 它 不 是 JavaScript 代码 ， 而 是 强 类 型 语言 的 伪 代 码 : 




































































SomeType x = SomeType( AnotherType( y ) ) 


其 中 变量 y 的 值 被 转换 为 SomeType 类 型 。 问 题 是 语言 本 身 不 允许 直接 将 y 转换 为 
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SomeType 类 型 。 于 是 我 们 需要 一 个 中 间 步 又 ， 先 将 y 转换 为 AnotherType 类 型 ， 然 后 再 从 
AnotherType 转换 为 SomeType。 


如 果 能 够 这 样 : 
SomeType x = SomeType( y ) 


省 去 了 中 间 步 又 以 后 ， 类 型 转换 变 得 更 简洁 了 。 这 些 无 关 紧 要 的 中 间 步 又 可 以 也 应 该 被 
隐藏 。 

也 许 有 些 情 况 下 这 些 中 间 步 骤 还 是 必要 的 ， 但 是 我 觉得 通过 语言 机 制 或 定制 方法 来 简化 代 
码 ， 抽 象 和 隐藏 那些 细 枝 未 方 ， 有 助 于 提高 代码 的 可 读 性 。 


当然 这 些 中 间 步 又 仍然 会 发 生 在 某 处 。 通 过 隐藏 这 些 细节 ， 我 们 就 可 以 专注 于 问题 本 身 ， 
这 里 是 将 变量 y 转换 为 SomeType 类 型 。 


虽然 这 并 非 是 个 十 分 恰当 的 隐 式 强制 类 型 转换 的 例子 ， 但 我 想 说 明 的 问题 是 ， 隐 式 强 制 类 
型 转换 同样 可 以 用 来 提高 代码 可 读 性 。 

然而 隐 式 强制 类 型 转换 也 会 带 来 一 些 负面 影响 ， 有 时 甚至 是 整 大 于 利 。 因 此 我 们 更 应 该 学 
习 怎 样 去 其 糟粕 ， 取 其 精华 

很 多 开发 人 员 认 为 如 果菜 个 机 制 有 优点 A 但 同时 又 有 缺点 Z， 为 了 保险 起 见 不 如 全 部 弃 之 
不 用 。 


我 不 赞同 这 种 “ 因 哮 废 食 ” 的 做 法 。 不 要 因为 只 看 到 了 隐 式 强制 类 型 转换 的 缺点 就 想当然 
地 认为 它 一 无 是 处 。 它 也 有 好 的 方面 ， 希 望 越 来 越 多 的 开发 人 员 能 加 以 发 现 和 运用 。 


4.4.2 ”字符 串 和 数字 之 间 的 隐 式 强制 类 型 转换 

前 面 我 们 讲 了 字符 串 和 数字 之 间 的 显 式 强制 类 型 转换 ， 现 在 介绍 它们 之 间 的 隐 式 强制 类 型 
转换 。 先 来 看 一 些 会 产生 隐 式 强制 类 型 转换 的 操作 。 

通过 重 载 ，+ 运算 符 即 能 用 于 数字 加 法 ， 也 能 用 于 字符 串 拼接 。Javaseript 怎样 来 判断 我 们 
要 执行 的 是 哪个 操作 ? 例如 ， 




































































eo 








var a = "42" 
var b = "0"; 
var C = 42; 
var d = 0; 


a+b; // "420" 
c+d;//42 

















这 里 为 什么 会 得 到 "429" 和 42 两 个 不 同 的 结果 呢 ? 通常 的 理解 是 ， 因 为 其 一 个 或 者 两 个 操 
作 数 都 是 字符 串 ， 所 以 + 执行 的 是 字符 串 拼 接 操作 。 这 样 解释 只 对 了 一 半 ， 实 际 情况 要 复 


杂 得 多 。 


例如 : 











a+b; // "1,23,4" 


a 和 b 都 不 是 字符 串 ， 但 是 它们 都 被 强制 转换 为 字符 串 然 后 进行 拼接 。 原 因 何在 


Do) 





下 面 两 段 内 容 与 规范 有 关 ， 如 果 太 难 理解 可 以 跳 过 。 

















根据 ES5 规范 11.6.1 节 ， 如 果 某 个 操作 数 是 字符 串 或 者 能 够 通过 以 下 步骤 转换 为 字符 串 
的 话 ，+ 将 进行 拼接 操作 。 如 果 其 中 一 个 操作 数 是 对 象 (包括 数组 )， 则 首先 对 其 调用 
ToPrimitive 抽象 操作 (规范 9.1 节 )， 该 抽象 操作 再 调用 [[Defaultvalue]] (规范 8.12.8 
节 )， 以 数字 作为 上 下 文 。 


你 或 许 注意 到 这 与 ToNumber 抽象 操作 处 理 对 象 的 方式 一 样 (参见 4.2.2 节 )。 因 为 数组 的 
valueof() 操作 无 法 得 到 简单 基本 类 型 值 ， 于 是 它 转 而 调用 tostring()。 因 此 上 例 中 的 两 
个 数组 变 成 了 "1,2" 和 "3,4"。+ 将 它们 拼接 后 返回 "1,23,4"。 


























简单 来 说 就 是 ， 如 果 + 的 其 中 一 个 操作 数 是 字符 串 〈 或 者 通过 以 上 步骤 可 以 得 到 字符 串 
则 执行 字符 串 拼 接 ， 否则 执行 数字 加 法 。 


Sonsini 


9 


有 一 个 坑 常 常 被 提 到 ， 即 [] + { 和 fy + []， 它 们 返回 不 同 的 结果 ， 分别 是 
"[object 0bject]" 和 060。 我 们 将 在 5.1.3 市 详细 介绍 。 





对 隐 式 强制 类 型 转换 来 说 ， 这 意味 着 什么 ? 
我 们 可 以 将 数字 和 空 字符 串 "" 相 + 来 将 其 转换 为 字符 串 : 




















var a = 42; 
var b=a+t+™"" 


b; // "42" 
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+ 作为 数字 加 法 操作 是 可 互 换 的 ， 即 2 + 3 等 同 于 3 + 2。 作 为 字符 串 拼接 操 
作 则 不 行 ， 但 对 空 字符 串 "" 来 说 ，a + "" 和 "" + a 结果 一 样 。 











a + "" 这 样 的 隐 式 转换 十 分 常见 ， 一 些 对 隐 式 强制 类 型 转换 持 批 评 态 度 的 人 也 不 能 免 俗 。 
这 本 身 就 很 能 说 明 问 题 ， 无 论 怎样 被 人 诉 病 ， 隐 式 强 制 类 型 转换 仍然 有 其 用 武之 地 。 


a + ""( 隐 式 ) 和 前 面 的 String(a) ( 显 式 ) 之 间 有 一 个 细微 的 差别 需要 注意 。 根 据 
ToPrimitive 抽象 操作 规则 ，a + "" 会 对 a 调用 value0f() 方 法， 然后 通过 Tostring 抽象 
操作 将 返回 值 转换 为 字符 串 。 而 String(a) 则 是 直接 调用 ToString()。 


它们 最 后 返回 的 都 是 字符 串 ， 但 如 果 a 是 对 象 而 非 数字 结果 可 能 会 不 一 样 ! 


例如 : 
var a={ 
valueOf: function() { return 42; }, 
toString: function() { return 4; } 
}; 
| 丰 mh 和 A Wi 


String( a ); // "4" 


你 一 般 不 太 可 能 会 遇 到 这 个 问题 ， 除 非 你 的 代码 中 真 的 有 这 些 菲 夷 所 思 的 数据 结构 和 操 
作 。 在 定制 valueof() 和 toString() 方法 时 需要 特别 小 心 ， 因 为 这 会 影响 强制 类 型 转换 的 
结果 。 


再 来 看 看 从 字符 串 强 制 类 型 转换 为 数字 的 情况 。 


var a = "3.14"; 
var b=a -0; 


b; // 3.14 


- 是 数字 减法 运算 符 ， 因 此 a - 9 会 将 a 强制 类 型 转换 为 数字 。 也 可 以 使 用 a * 1 和 a / 
1， 因 为 这 两 个 运算 符 也 只 适用 于 数字 ， 只 不 过 这 样 的 用 法 不 太 常 见 。 


对 象 的 - 操作 与 + 类 似 : 








var a = [3]; 
var b = [1]; 


a-b;//2 


为 了 执行 减法 运算 ,a 和 b 都 需要 被 转换 为 数字 ， 它 们 首先 被 转换 为 字符 串 〈 通 过 
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tostring()) ， 然 后 再 转换 为 数字 。 
字符 趾 和 数字 之 间 的 隐 式 强制 类 型 转换 真如 人们 所 说 的 那样 粮 粒 四 ?我 个 人 不 这 么 看 。 











b = String(a) ( 显 式 ) 和 b = a +""” ( 隐 式 ) 各 有 优点 ，b = a + "更 常见 一 些 。 虽 然 饱 
受 诉 病 ， 但 隐 式 强制 类 型 转换 仍然 有 它 的 用 处 。 


4.4.3 布尔 值 到 数字 的 隐 式 强制 类 型 转换 
在 将 某 些 复杂 的 布尔 逻辑 转换 为 数字 加 法 的 时 候 ， 隐 式 强制 类 型 转换 能 派 上 大 用 场 。 当 然 
这 种 情况 并 不 多 见 ， 属 于 特殊 情况 特殊 处 理 。 

















例如 : 


function onlyOne(a,b,c) { 
return !!((a && !b && !c) || 
(1a && b && !c) || (!a 8&8 !b &8 c)); 


var a = true; 
var b = false; 


onlyOne( a, b, b ); // true 
onlyOne( b, a, b ); // true 


onlyOne( a, b, a ); // false 



































如 果 其 中 有 且 仅 有 一 个 参数 为 true， 则 onlyone(..) 返回 true。 其 在 条 件 判断 中 使 用 了 隐 
式 强 制 类 型 转换 ， 其 他 地 方 则 是 显 式 的 ， 包 括 最 后 的 返回 值 。 

















但 如 果 有 多 个 参数 时 (4 个 、5 个 ， 甚 至 20 个 )， 用 上 面 的 代码 就 很 难处 理 了 。 这 时 就 可 
以 使 用 从 布尔 值 到 数字 (9 或 1) 的 强制 类 型 转换 : 























function onlyOne() { 
var sum = 0; 
for (var i=0; i < arguments.Length; i++) { 
// 跳 过 假 值 ,和 处 理 9 一 样 ,但 是 避免 了 NaN 
if (arguments[i]) { 
sum += arguments[i]; 








} 
} 


return Sum == 1; 


} 


var a 
var b 


= true; 
= false; 
onlyOne( b, a ); // true 
onLyone( b, a, b, b, b ); // true 
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onLyone( b, b ); // false 
onLyone( b, a, b, b, b, a ); // false 


在 ontlyone(..) 中 除了 使 用 for 循环 ， 还 可 以 使 用 ES5 规范 中 的 reduce(..) 


通过 sum += arguments[i] 中 的 隐 式 强制 类 型 转换 ， 将 真 值 (true/truthy) 转换 为 1 并 进行 
累加 。 如 果 有 且 仅 有 一 个 参数 为 true， 则 结果 为 1; 否则 不 等 于 1，sum == 1 条件 不 成 立 。 























同样 的 功能 也 可 以 通过 显 式 强 制 类 型 转换 来 实现 : 


function onlyOne() { 
var Sum = 0; 
for (var i=0; i < arguments.Length; i++) { 
sum += Number( !!arguments[i] ); 
} 
return Sum === 1; 


} 


!1arguments[i] 首先 将 参数 转换 为 true 或 false。 因 此 非 布尔 值 参 数 在 这 里 也 是 可 以 的 ， 
比如 : ontlyone("42",，0) (否则 的 话 ， 字 符 串 会 执行 拼接 操作 ， 这 样 结果 就 不 对 了 )。 




















转换 为 布尔 值 以 后 ， 再 通过 Number(..) 显 式 强制 类 型 转换 为 0 或 1。 


这 里 使 用 显 式 强制 类 型 转换 会 不 会 更 好 一 些 ? 注释 里 说 这 样 的确 能 够 避免 NaN 带 来 的 问题 ， 
不 过 最 终 是 看 我 们 自己 的 需要 。 我 个 人 觉得 前 者 ， 即 隐 式 强制 类 型 转换 ， 更 为 简洁 (前提 
是 不 会 传递 undefined 和 NaN 这 样 的 值 )， 而 显 式 强 制 类 型 转换 则 会 带 来 一 些 代 码 元 余 。 











总 之 如 本 书 一 贯 强调 的 那样 ， 一 切 都 取决 于 我 们 自己 的 判断 和 权衡 。 


无 论 使 用 隐 式 还 是 显 式 ， 我 们 都 能 通过 修改 onlyTwol..) 或 者 onlyFivel..) 
来 处 理 更 复杂 的 情况 ， 只 需要 将 最 后 的 条 件 判断 从 1 改 为 2 或 5。 这 比 加 入 
一 大 堆 && 和 || 表达 式 简 洁 得 多 。 所 以 强制 类 型 转换 在 这 里 还 是 很 有 用 的 。 











4.4.4” 隐 式 强 制 类 型 转换 为 布尔 值 
现在 我 们 来 看 看 到 布尔 值 的 隐 式 强制 类 型 转换 ， 它 最 为 常见 也 最 容易 搞 错 。 


相对 布尔 值 ， 数 字 和 字符 串 操 作 中 的 隐 式 强制 类 型 转换 还 算 比较 明显 。 下 面 的 情况 会 发 生 
布尔 值 隐 式 强制 类 型 转换 。 

















(1) if 〈…) 语句 中 的 条 件 判断 表达 式 。 


(2)for( .. ; .. ; .. ) 语句 中 的 条 件 判 断 表达 式 (第 二 个 )。 
(GB)while(..) 和 do. .while(..) 循环 中 的 条 件 判断 表达 式 。 





(4)? : 中 的 条 件 判 断 表达 式 。 
(5) 逻辑 运算 符 || (人 逻辑 或 ) 和 级 (逻辑 与 ) 左边 的 操作 数 作为 条 件 判 断 表达 式 )。 


以 上 情况 中 ， 非 布尔 值 会 被 隐 式 强制 类 型 转换 为 布尔 值 ， 遵 循 前 面 介 绍 过 的 ToBoolean 抽 


象 操作 规则 。 

例如 : 
var a = 42; 
var b = "abc"; 
Var Cc; 


var d = null; 


if (a) { 

console.log( "yep" ); // yep 
} 
while (c) { 

console.log( "nope, never runs" ); 
} 
Cs"d 3. bs 

// "abe" 

if ((a && d) || c) { 

console.log( "yep" ); // yep 


} 
上 例 中 的 非 布 尔 值 会 被 隐 式 强制 类 型 转换 为 布尔 值 以 便 执行 条 件 判 断 。 


4.4.5 || 和 && 


逻辑 运算 符 || (或 ) 和 && (与 ) 应 该 并 不 陌生 ， 也 许 正 因为 如 此 有 人 觉得 它们 在 


JavaScript 中 的 表现 也 和 在 其 他 语言 中 一 样 。 
这 里 面 有 一 些 非常 重要 但 却 不 太 为 人 所 知 的 细微 差别 。 

















我 
符 ”(selector operators) 或 者 “操作 数 选 择 器 运算 符 ”(operand selector operators ) 
a 





为 什么 ”因为 和 其 他 语言 不 同 ， 在 JavaScript 中 它们 返回 的 并 不 是 布尔 值 。 





其 实 不 太 先 同 将 它们 称 为 “逻辑 运算 符 ”， 因为 这 不 太 准 确 。 称 它们 为 “选择 器 运算 
更 


丛 


它们 的 返回 值 是 两 个 操作 数 中 的 一 个 ( 且 仅 一 个 )。 即 选择 两 个 操作 数 中 的 一 个 ， 然 后 返 
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回 它 的 值 。 











引述 ES5 规范 11.11 市 : 
&& 和 || 运算 符 的 返回 值 并 不 一 定 是 布尔 类 型 ， 而 是 两 个 操作 数 其 中 一 个 的 值 。 
例如 : 


var a = 42; 
var b = "abc"; 
var C = null; 


a ll b; // 42 

a && b; // "abc" 
C | b; // "abc" 
Cc && b; // null 

















在 C 和 PHP 中 ， 上 例 的 结果 是 true 或 faLse， 在 JavaScript (以 及 Python 和 Ruby) 中 却 
是 某 个 操作 数 的 值 。 


|| 和 && 首先 会 对 第 一 个 操作 数 (a 和 c) 执行 条 件 判 断 ， 如 果 其 不 是 布尔 值 (如 上 例 ) 就 
先进 行 ToBoolean 强制 类 型 转换 ， eos 条 件 判 断 。 


对 于 || 来 说 ， 如 果 条 件 判 断 结果 为 true 就 返回 第 一 个 操作 数 (a 和 c) 的 值 ， 如 果 为 
false 就 返回 第 二 个 操作 数 (b) 的 值 。 

8&& 则 相反 ， 如 果 条 件 判断 结果 为 true 就 返回 第 二 个 操作 数 (b) 的 值 ， 如 果 为 false 就 返 
回 第 一 个 操作 数 (a 和 <c) 的 值 。 
1 和 &8 返回 它们 其 中 一 个 操作 数 的 值 ， 而 非 条 件 判 断 的 结果 (其 中 可 能 涉及 强制 类 型 转 
换 )。c && b 中 c 为 nutt， 是 一 个 假 值 ， 因 此 级 表达 式 的 结果 是 null ( 即 c 的 值 )， 而 非 
条 件 判断 的 结果 false。 


现在 明白 我 为 什么 把 它们 叫 作 “操作 数 选 择 器 ”了 吧 ? 
换 一 个 角度 来 理解 : 


a || b; 
// ey equivalent to): 


dq?7ada: 


























































































































a && b; 
// 大 致 相当 于 (roughly equivalent to): 


a?b:a; 














之 所 以 说 大 致 相当 ， 是 因为 它们 返回 结果 虽然 相同 但 是 却 有 一 个 细微 的 差 
别 。 在 8 ? a。 : b 中 ,如果 a 是 一 个 复杂 一 些 的 表达 式 (比如 有 副作用 的 了 
数 调 用 等 )， 它 有 可 能 被 执行 两 次 (如 果 第 一 次 结果 为 真 )。 而 在 a || b 中 a 
只 执行 一 次 ， 其 结果 用 于 条 件 判断 和 返回 结果 (如 果 适 用 的 话 )。a b 和 a? 
b : a 也 是 如 此 。 




















下 面 是 一 个 十 分 常见 的 上 | 的 用 法 ， 也 许 你 已 经 用 过 但 并 未 完全 理解 : 








function foo(a,b) { 
a=a || "hello"; 
b=b || "world"; 


console.log( a+ " "+b); 


} 


foo(); // "hello world" 
foo( "yeah", "yeah!" ); // "yeah yeah!" 


a 


= a || "heLLo" (又 称 为 C# 的 “ 空 值 合并 运算 符 ” 的 JavaScript 版 本 ) 检查 
果 还 未 赋值 (或 者 为 假 值 )， 就 赋予 它 一 个 默认 值 ("hello")， 


这 里 需要 注意 ! 


局 
E 


[Ey 


foo( "That’s it!", "" ); // "That’s it! world" <-- 坚 ! 


第 二 个 参数 "" 是 一 个 假 值 (falsy value， 参 见 4.2.3 节 )， 因 此 b = b || "world" 条 件 不 成 
立 ， 返 回 默认 值 "world"。 








这 种 用 法 很 常见 ， 但 是 其 中 不 能 有 假 值 ， 除 非 加 上 更 明确 的 条 件 判断 ， 或 者 转 而 使 用 ? : 
三 元 表达 式 。 





通过 这 种 方式 来 设置 默认 值 很 方便 ， 甚 至 那些 公开 诉 病 JavaScript 强制 类 型 转换 的 人 也 经 
常 使 用 。 


再 来 看 看 8&。 


有 一 种 用 法 对 开发 人 员 不 常见 ， 然 而 JavaScript 代码 压缩 工具 常用 。 就 是 如 果 第 一 个 操 
作 数 为 真 值 ， 则 8 运算 符 “ 选 择 ” 第 二 个 操作 数 作为 返回 值 ， 这 也 叫 作 “守护 运算 符 ” 
(guard operator， 参 见 5.2.1 节 ) ， 即 前 面 的 表达 式 为 后 面 的 表达 式 “ 把 关 ”: 


























function foo() { 
console.log( a ); 


} 
var a = 42; 


a && foo(); // 42 
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foo() 只 有 在 条 件 判断 a 通过 时 才 会 被 调用 。 如 果 条 件 判 断 未 通过 ，a && foo() 就 会 悄然 
终止 (也 叫 作 “短路 ”，short circuiting) ，foo() 不 会 被 调用 。 


这 样 的 用 法 对 开发 人 员 不 太 常 见 ， 开 发 人 员 通 常 使 用 if (a) { foo(); }。 但 JavaScript 
代码 压缩 工具 用 的 是 a 8&& foo()， 因 为 更 简洁 。 以 后 再 碰 到 这 样 的 代码 你 就 知道 是 怎么 
回 事 了 。 

1 和 && 各 自 有 它们 的 用 武之 地 ， 前 提 是 我 们 理解 并 且 愿 意 在 代码 中 运用 隐 式 强制 类 型 
转换 。 





























a = b || "something" 和 a 8&& b() 用 到 了 “短路 ”机 制 ， 我 们 将 在 5.2.1 节 
详细 介绍 。 





你 大 概 会 有 疑问 : 既然 返回 的 不 是 true 和 false， 为 什么 a && (b || c) 这 样 的 表达 式 在 
if 和 for 中 没 出 过 问题 ? 








这 或 许 并 不 是 代码 的 问题 ， 问 题 在 于 你 可 能 不 知道 这 些 条 件 判断 表达 式 最 后 还 会 执行 布尔 
值 的 隐 式 强制 类 型 转换 。 


例如 : 





var a = 42; 
var b = null; 
var C = "foo"; 


if (a && (b || c)) { 


console.log( "yep" ); 
} 


这 里 a && (b || c) 的 结果 实际 上 是 "foo" 而 非 true， 然 后 再 由 if 将 foo 强制 类 型 转换 为 
布尔 值 ， 所 以 最 后 结果 为 true。 


现在 明白 了 吧 ， 这 里 发 生 了 隐 式 强制 类 型 转换 。 如 果 要 避免 隐 式 强制 类 型 转换 就 得 这 样 : 








if (!!a && (!!b || !!c)) { 
console.log( "yep" ); 
} 


4.4.6 符号 的 强制 类 型 转换 
目前 我 们 介绍 的 显 式 和 隐 式 强制 类 型 转换 结果 是 一 样 的 ， 它 们 之 间 的 差异 仅仅 体现 在 代码 
可 读 性 方面 。 
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但 ES6 中 引入 了 符号 类 型 ， 它 的 强制 类 型 转换 有 一 个 坑 ， 在 这 里 有 必要 提 一 下 。ES6 允许 
从 符号 到 字符 串 的 显 式 强制 类 型 转换 ， 然 而 隐 式 强制 类 型 转换 会 产生 错误 ， 具 体 的 原因 不 
在 本 书 讨论 范围 之 内 。 


例如 : 














var s1 = Symbol( "cool" ); 
String( s1 ); // "Symbol(cool)" 


var s2 = Symbol( "not cool" ); 
S2 + ""; // TypeError 


符号 不 能 够 被 强制 类 型 转换 为 数字 ( 显 式 和 隐 式 都 会 产生 错误 )， 但 可 以 被 强制 类 型 转换 
为 布尔 值 ( 显 式 和 隐 式 结 采 都 是 true)。 


由 于 规则 缺乏 一 致 性 ， 我 们 要 对 ES6 中 符号 的 强制 类 型 转换 多 加 小 心 。 
好 在 鉴于 符号 的 特殊 用 途 (参见 第 3 章 ) ， 我 们 不 会 经 常用 到 它 的 强制 类 型 转换 。 


4.5 ”宽松 相等 和 严格 相等 


宽松 相等 (loose equals) == 和 严格 相等 (strict equals) === 都 用 来 判断 两 个 值 是 否 “ 相 
等 "， 但 是 它们 之 间 有 一 个 很 重要 的 区 别 ， 特 别 是 在 判断 条 件 上 。 


常见 的 误区 是 “== 检查 值 是 否 相等 ，=== 检查 值 和 类 型 是 否 相 等 "。 听 起 来 变 有 道理 ， 然 而 
还 不 够 准确 。 很 多 JavaScript 的 书籍 和 博客 也 是 这 样 来 解释 的 ， 但 是 很 遗憾 他 们 都 错 了 。 


正确 的 解释 是 :“== 允许 在 相等 比较 中 进行 强制 类 型 转换 ， 而 === 不 允许 。 


4.5.1 相等 比较 操作 的 性 能 
我 们 来 看 一 看 两 种 解释 的 区 别 。 


根据 第 一 种 解释 (不 准确 的 版 本 )，=== 似乎 比 == 做 的 事情 更 多 ， 因 为 它 还 要 检查 值 的 
类 型 。 第 二 种 解释 中 == 的 工作 量 更 大 一 些 ， 因 为 如 果 值 的 类 型 不 同 还 需要 进行 强制 类 型 
转换 。 

有 人 觉得 == 会 比 === 慢 ， 实 际 上 虽然 强制 类 型 转换 确实 要 多 花 点 时 间 ， 但 仅仅 是 微 秒 级 
( 百 万 分 之 一 秒 ) 的 差别 而 已 。 


如 果 进 行 比较 的 两 个 值 类 型 相同 ， 则 == 和 === 使 用 相同 的 算法 ， 所 以 除了 JavaScript 引擎 
实现 上 的 细微 差别 之 外 ， 它 们 之 间 并 没有 什么 不 同 。 


如 果 两 个 值 的 类 型 不 同 ， 我 们 就 需要 考虑 有 没有 强制 类 型 转换 的 必要 ， 有 就 用 ==， 没 有 就 
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=-=， 不 用 在 平 性 能 


== 和 === 都 会 检查 操作 数 的 类 型 。 区 别 在 于 操作 数 类 型 不 同时 它们 的 处 理 方 
式 不 同 。 





4.5.2 ”抽象 相等 
ES5 规范 11.93 节 的 “抽象 相等 比较 算法 ”定义 了 -= 运算 符 的 行为 。 该 算法 简单 而 又 全 
面 ， 涵 盖 了 所 有 可 能 出 现 的 类 型 组 合 ， 以 及 它们 进行 强制 类 型 转换 的 方式 。 








“抽象 相等 ”(abstract equality) 的 这 些 规则 正 是 隐 式 强制 类 型 转换 被 诉 病 
的 原因 。 开 发 人 员 觉 得 它们 太 星 涩 ， 很 难 掌握 和 运用 ， 雌 (导致 bug) 大 
于 利 (提高 代码 可 读 性 )。 这 种 观点 我 不 敢 苟同 ， 因 为 本 书 的 读者 都 是 优秀 
的 开发 人 员 ， 整 天 与 算法 和 代码 打交道 ,“ 抽 象 相等 ”对 各 位 来 说 只 是 小 菜 
一 碟 。 建 议 大 家 看 一 看 ES5 规范 11.9.3 节 ， 你 会 发 现 这 些 规则 其 实 非常 简 
单 明 了 。 
































其 中 第 一 段 (11.9.3.1) 规定 如 果 两 个 值 的 类 型 相同 ， 就 仅 比较 它们 是 否 相 等 。 例 如 ，42 
等 于 42，"abc" 等 于 "abc"。 


有 几 个 非常 规 的 情况 需要 注意 。 


。 NaN 不 等 于 NaN (参见 第 2 章 )。 
。 +0 等 于 -0 (参见 第 2 章 )。 


11.9.3.1 的 最 后 定义 了 对 象 (包括 函数 和 数组 ) 的 宽松 相等 ==。 两 个 对 象 指向 同一 个 值 时 
即 视 为 相等 ， 不 发 生 强制 类 型 转换 。 


=== 的 定义 和 11.9.3.1 一 样 ， 包 括 对 象 的 情况 。 实 际 上 在 比较 两 个 对 象 的 时 
候 ，== 和 === 的 工作 原理 是 一 样 的 。 











11.9.3 节 中 还 规定 ，== 在 比较 两 个 不 同类 型 的 值 时 会 发 生 隐 式 强制 类 型 转换 ， 会 将 其 中 之 
一 或 两 者 都 转换 为 相同 的 类 型 后 再 进行 比较 。 














松 不 相等 〈loose not-equality) != 就 是 == 的 相反 值 ，!== 同 理 。 


可 





1. 字符 串 和 数字 之 间 的 相等 比较 
我 们 沿用 本 章 前 面 字符 串 和 数字 的 例子 来 解释 == 中 的 强制 类 型 转换 : 


var a = 42; 
var b = "42"; 


a === b; // false 
a == b; // true 


因为 没有 强制 类 型 转换 ， 所 以 a === b 为 false，42 和 "42" 不 相等 。 














而 a == b 是 宽松 相等 ， 即 如 果 两 个 值 的 类 型 不 同 ， 则 对 其 中 之 一 或 两 者 都 进行 强制 类 型 
转换 。 


具体 怎么 转换 ?是 a 从 42 转换 为 字符 串 ， 还 是 b 从 "42" 转换 为 数字 ? 
ES5 规范 11.9.3.4-5 这 样 定义 : 


(1) 如 果 Type(x) 是 数字 ，Type(y) 是 字符 串 ， 则 返回 x == ToNumber(y) 的 结果 。 
(2) 如 果 Type(x) 是 字符 串 ，Type(y) 是 数字 ， 则 返回 ToNumber(x) == y 的 结果 。 





规范 使 用 Number 和 String 来 代表 数字 和 字符 串 类 型 ， 而 本 书 使 用 的 是 数字 
(number) 和 字符 串 (string)。 切 勿 将 规范 中 的 Number 和 原生 函数 Number() 
混为一谈 。 本 书 中 类 型 名 的 首 字 符 大 写 和 小 写 是 一 回 事 。 





























根据 规范 ，"42" 应 该 被 强制 类 型 转换 为 数字 以 便 进行 相等 比较 。 相 关 规 则 ， 特 别 是 
ToNumber 抽象 操作 的 规则 前 面 已 经 介绍 过 。 本 例 中 两 个 值 相等 ， 均 为 42。 


2. 其 他 类 型 和 布尔 类 型 之 间 的 相等 比较 
== 最 容易 出 错 的 一 个 地 方 是 true 和 false 与 其 他 类 型 之 间 的 相等 比较 。 


例如 : 











var a = "42"; 
var b = true; 


a == b; // false 


我 们 都 知道 "42" 是 一 个 真 值 〈 见 本 章 前 面部 分 )， 为 什么 == 的 结果 不 是 true 呢 ? 原因 既 简 
单 又 复杂 ， 让 人 很 容易 掉 坑 里 ， 很 多 JavaScript 开发 人 员 对 这 个 地 方 并 未 引起 足够 的 重视 。 
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规范 11.9.3.6-7 是 这 样 说 的 : 





(1) 如 果 Type(x) 是 布尔 类 型 ， 则 返回 ToNumber(x) == y 的 结果 ; 
(2) 如 果 Type(y) 是 布尔 类 型 ， 则 返回 x == ToNumber(y) 的 结果 。 
仔细 分 析 例 子 ， 首 先 : 


var x = true; 
var y = "42"; 


x == y; // false 
Type(x) 是 布尔 值 ， 所 以 ToNunber(x) 将 true 强制 类 型 转换 为 1， 变 成 1 == "42"， 二 者 的 
类 型 仍然 不 同 ，"42" 根据 规则 被 强制 类 型 转换 为 42， 最 后 变 成 1 == 42， 结 果 为 false。 
反 过 来 也 一 样 ; 


var x = "42"; 
var y = false; 


x == y; // false 


Type(y) 是 布尔 值 ， 所 以 ToNumber(y) 将 false 强制 类 型 转换 为 6， 然 后 "42” == 9 再 变 成 
42 == 0， 结 果 为 false。 


























也 就 是 说 ， 字 符 串 "42" 既 不 等 于 true， 也 不 等 于 false。 一 个 值 怎么 可 以 既 非 真 值 也 非 假 
值 ， 这 也 太 人 奇怪 了 吧 ? 


这 个 问题 本 身 就 是 错误 的 ， 我 们 被 自己 的 大 脑 欺 骗 了 。 


"42" 是 一 个 真 值 没 错 ， 但 "42" == true 中 并 没有 发 生 布尔 值 的 比较 和 强制 类 型 转换 。 这 里 
不 是 "42" 转换 为 布尔 值 (true) ， 而 是 true 转换 为 1，"42" 转换 为 42。 


这 里 并 不 涉及 ToBoolean， 所 以 "42" 是 真 值 还 是 假 值 与 == 本 身 没 有 关系 ! 




















重点 是 我 们 要 搞 清 楚 == 对 不 同 的 类 型 组 合 怎样 处 理 。== 两 边 的 布尔 值 会 被 强制 类 型 转换 
很 奇怪 吧 ? 我 个 人 建议 无 论 什么 情况 下 都 不 要 使 用 == true 和 == false。 























请 注意 ， 这 里 说 的 只 是 ==，=== true 和 === false 不 允许 强制 类 型 转换 ， 所 以 并 不 涉及 
ToNumber 。 
例如 : 

var a = "42"; 














// 不 要 这 样 用 ,条 件 判断 不 成 立 : 
if (a == true) { 
//.. 








// 也 不 要 这 样 用 ,条 件 判 断 不 成 立 : 
if (a === true) { 


//.. 





} 


// 这 样 的 显 式 用 法 没 问 题 : 
if (a) { 

A 
} 


// 这 样 的 显 式 用 法 更 好 : 
if (!!a) { 
A 








} 


// 这 样 的 显 式 用 法 也 很 好 : 
if (Boolean( a )) { 


//.. 





} 


避免 了 == true 和 == false (也 叫 作 布 尔 值 的 宽松 相等 ) 之 后 我 们 就 不 用 担心 这 些 坑 了 。 


3. null 和 undefined 之 间 的 相等 比较 
null 和 undefined 之 间 的 == 也 涉及 隐 式 强制 类 型 转换 。ES5 规范 11.9.3.2-3 规定 : 


(1) 如 果 x 为 null,，y 为 undefined， 则 结果 为 true。 
(2) 如 果 x 为 undefined，y 为 nutL， 则 结果 为 true。 



































情况 。 








这 也 就 是 说 在 == 中 nuLL 和 undefined 是 一 回 





了， 可 以 相互 进行 隐 式 强制 类 型 转换 : 





Ih 


var a = Null; 
var b; 


a == b; // true 
a == null; // true 
b == null; // true 


0; // false 
==- 0; // false 


a == false; // false 
b == false; // false 
i // false 
Besse // false 
日 一 

b 


在 == 中 nutl 和 undefined 相等 〈 它 们 也 与 其 自身 相等 )， 除 此 之 外 其 他 值 都 不 存在 这 种 
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null 和 undefined 之 间 的 强制 类 型 转换 是 安全 可 靠 的 ， 上 例 中 除 null 和 undefined 以 外 的 
其 他 值 均 无 法 得 到 假 阳 (false positive) 结果 。 个 人 认为 通过 这 种 方式 将 null 和 undefined 
作为 等 价值 来 处 理 比较 好 。 


例如 : 




















var a = doSomething(); 


if (a == null) { 
//.. 
} 
条 件 判断 a == null 仅 在 dosomething() 返回 非 null 和 undefined 时 才 成 立 ， 除 此 之 外 其 
他 值 都 不 成 立 ， 包 括 69、false 和 "" 这 样 的 假 值 。 


下 面 是 显 式 的 做 法 ， 其 中 不 涉及 强制 类 型 转换 ， 个 人 感觉 更 繁琐 一 些 (大 概 执 行 效率 也 会 
更 低 ) : 





var a = doSomething(); 


if (a === undefined || a === null) { 
/fa 
} 


我 认为 a == null 这 样 的 隐 式 强制 类 型 转换 在 保证 安全 性 的 同时 还 能 提高 代码 可 读 性 。 


4. 对 象 和 非 对 象 之 间 的 相等 比较 
关于 对 象 (对 象 / 国 数 / 数 组) 和 标量 基本 类 型 (字符 串 /数字 /布尔 值 ) 之 间 的 相等 比 
较 ，ES5 规范 11.9.3.8-9 做 如 下 规定 : 














(1) 如 果 Type(x) 是 字符 串 或 数字 ，Type(y) 是 对 象 ， 则 返回 x == Toprimitive(y) 的 结 
(2) 如 果 Type(x) 是 对 象 ，Type(y) 是 字符 串 或 数字 ， 则 返回 ToPromitive(x) == y 的 结果 。 


站 涝 




















这 里 只 提 到 了 字符 串 和 数字 ， 没 有 布尔 值 。 原 因 是 我 们 之 前 介绍 过 11.9.3.6-7 
中 规定 了 布尔 值 会 先 被 强制 类 型 转换 为 数字 。 





例如 : 


var a = 42; 
var b=[ 42 |]; 


a == b; // true 





[ 42 ] 首先 调用 ToPromitive 抽象 操作 (参见 4.2 节 )， 返 回 "42"， 变 成 "42"”== 42， 然 后 
又 变 成 42 == 42， 最 后 二 者 相等 。 


之 前 介绍 过 的 ToPromitive 抽象 操作 的 所 有 特性 (如 tostring()、valueof()) 
在 这 里 都 适用 。 如 果 我 们 需要 自 定义 valueof() 以 便 从 复杂 的 数据 结构 返回 
一 个 简单 值 进行 相等 比较 ， 这 些 特 性 会 很 有 帮助 。 














在 第 3 章 中 ， 我 们 介绍 过 “ 拆 封 "， 即 “打开 ”封装 对 象 (如 new String("abc"))， 返回 其 
中 的 基本 数据 类 型 值 ("abc")。== 中 的 ToPromitive 强制 类 型 转换 也 会 发 生 这 样 的 情况 : 


var a = "abc"; 
var b = Object( a ); // 和 new String( a ) 一 样 





a === b; // false 

a == b; // true 
a == b 结果 为 true， 因 为 b 通 过 ToPromitive 进行 强制 类 型 转换 (也 称 为 “ 拆 封 ?"， 英 文 
为 unboxed 或 者 unwrapped) ， 并 返回 标量 基本 类 型 值 "abc" ， 与 a 相等 。 





但 有 一 些 值 不 这 样 ， 原 因 是 == 算法 中 其 他 优先 级 更 高 的 规则 。 例 如 : 


var a = Null; 
var b = Object( a ); // 和 0bject() 一 样 
a == b; // false 





var Cc = undefined; 
var d = Object( c ); // 和 0bject() 一 样 
GE // false 





var e = NaN; 
var f = Object( e ); // 和 new Number( e ) 一 样 
SEE // false 





因为 没有 对 应 的 封装 对 象 ， 所 以 nuLL 和 undefined 不 能 够 被 封装 (boxed)，0bject(nul1) 
和 0bject() 均 返 回 一 个 常规 对 象 。 


NaN 能 够 被 封装 为 数字 封装 对 象 ， 但 拆 封 之 后 NaN == NaN 返回 fatse， 因 为 NaN 不 等 于 NaN 
(参见 第 2 章 )。 





4.5.3 比较 少见 的 情况 
我 们 已 经 全 面 介绍 了 == 中 的 隐 式 强制 类 型 转换 (常规 和 非常 规 的 情况 )， 现 在 来 看 一 下 那 
些 需 要 特别 注意 和 避免 的 比较 少见 的 情况 。 


首先 来 看 看 更 改 内 置 原生 原型 会 导致 哪些 奇怪 的 结果 。 
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1. 返回 其 他 数字 
Number .prototype.valueOf = function() { 
return 3; 


}; 


new Number( 2 ) == 3; // true 
2 == 3 不 会 有 这 种 问题 ， 因 为 2 和 3 都 是 数字 基本 类 型 值 ， 不 会 调用 


Number .prototype.value0f() 方法 。 而 Number(2) 涉及 ToPrimitive 强制 类 型 
转换 ， 因 此 会 调用 vaLueof() 。 




















真是 让 人 头 大 。 这 也 是 强制 类 型 转换 和 == 被 诉 病 的 原因 之 一 。 但 问题 并 非 出 自 JavaScript， 
而 是 我 们 自己 。 不 要 有 这 样 的 想法 ， 觉 得 “编程 语言 应 该 阻止 我 们 犯错 误 ”。 


还 有 更 奇怪 的 情况 : 








if (a == 2 && a == 3) { 
//.. 
} 





你 也 许 觉得 这 不 可 能 ， 因 为 a 不 会 同时 等 于 2 和 3。 但 “同时 ”一 词 并 不 准确 ， 因 为 a == 
2 在 a == 3 之 前 执行 。 











如 果 让 a.valueof() 每 次 调用 都 产生 副作用 ， 比 如 第 一 次 返回 2， 第 二 次 返回 3， 就 会 出 现 
这 样 的 情况 。 这 实现 起 来 很 简单 : 











Var Ts 2 


Number .prototype.valueOf = function() { 
return i+t+; 


}; 
var a = new Number( 42 ); 
if (a == 2 && a == 3) { 


console.log( "Yep, this happened." ); 
} 


再 次 强调 ， 千 万 不 要 这 样 ， 也 不 要 因此 而 抱怨 强制 类 型 转换 。 对 一 种 机 制 的 滥用 并 不 能 成 
为 诉 病 它 的 借口 。 我 们 应 该 正确 合理 地 运用 强制 类 型 转换 ， 避 免 这 些 极端 的 情况 。 


2. 假 值 的 相等 比较 
== 中 的 隐 式 强制 类 型 转换 最 为 人 诉 病 的 地 方 是 假 值 的 相等 比较 。 


下 面 分 别 列 出 了 常规 和 非常 规 的 情况 : 









































"0" == null; // false 
"0" == undefined; // false 
"0" == false; // true -- 晕 ! 
"0" == NaN; // false 
"0" == 0; // true 
0 EE // false 
false == null; // false 
false == undefined; // false 
false == NaN; // false 
false == 0; // true -- 晕 ! 
false == ""; // true -- 晕 ! 
false == []; // true -- 晕 ! 
false == {}; // false 
" == null; // false 
" == undefined; // false 
" == NaN; // false 
" == 0; // true -- 学 | 
”== []; 万 tpue “< 党 | 
”== {]; // false 
0 == null; // false 
0 == undefined; // false 
0 == NaN; // false 
0 == []; 1/ true “= 尝 ! 
0 == {}; // false 


以 上 24 种 情况 中 有 17 种 比较 好 理解 。 比 如 我 们 都 知道 "" 和 NaN 不 相等 ，"9" 和 9 相等 。 





然而 有 7 种 我 们 注释 了 “ 坚 ! ”， 因 为 它们 属于 假 阳 (false positive) 的 情况 ， 里 面 坑 很 多 。 
"" 和 9 明显 是 两 个 不 同 的 值 ， 它 们 之 间 的 强制 类 型 转换 很 容易 搞 错 。 请 注意 这 里 不 存在 假 
阴 (false negative) 的 情况 。 





3. 极端 情况 
这 还 不 算 完 ， 还 有 更 极端 的 例子 : 


[] == ![] // true 
事情 变 得 越 来 越 疯狂 了。 看 起 来 这 似乎 是 真 值 和 假 值 的 相等 比较 ， 结 果 不 应 该 是 true， 因 
为 一 个 值 不 可 能 同时 既是 真 值 也 是 假 值 ! 
事实 并 非 如 此 。 让 我 们 看 看 ! 运算 符 都 做 了 些 什 么 ? 根据 ToBoolean 规则 ， 它 会 进行 布尔 
值 的 显 式 强制 类 型 转换 (同时 反 转 奇偶 校 验 位 )。 所 以 [] == ![] 变 成 了 [] == false。 前 
面 我 们 讲 过 false == []， 最 后 的 结果 就 顺理成章 了 。 


再 来 看 看 其 他 情况 : 
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2 = [2]3 // true 
""”== [null]; // true 


介绍 ToNumber 时 我 们 讲 过 ，== 右边 的 值 [2] 和 [null] 会 进行 ToPrimitive 强制 类 型 转换 ， 
以 便 能 够 和 左边 的 基本 类 型 值 (2 和 "") 进行 比较 。 因 为 数组 的 valueof() 返回 数组 本 身 ， 
所 以 强制 类 型 转换 过 程 中 数组 会 进行 字符 串 化 。 

第 一 行 中 的 [2] 会 转换 为 "2" ， 然 后 通过 ToNumber 转换 为 2。 第 二 行 中 的 [null] 会 直接 转 
换 为 ""。 


所 以 最 后 的 结果 就 是 2 == 2 和 "" ==""。 









































如 果 还 是 觉得 头 大 ， 那 么 你 的 困惑 可 能 并 非 来 自强 制 类 型 转换 ， 而 是 ToPrimitive 将 数组 
转换 为 字符 串 这 一 过 程 。 也 许 你 认为 [2].tostring() 返回 的 不 是 "2"，[nutL] .tostring() 
返回 的 也 不 是 ""。 
































但 是 如 果 不 这 样 处 理 的 话 又 能 怎样 呢 》 我 实在 想 不 出 其 他 更 好 的 办 法 。 或 许 应 该 将 [2] 转 
换 为 "[2]"， 但 这 样 的 话 在 别 的 地 方 又 显得 很 奇怪 。 











有 人 也 许 会 觉得 既然 String(nuLL) 返回 "nuLL"， 所 以 String([nuLL]) 也 应 该 返回 "null"。 
确实 有 道理 ， 但 这 就 是 问题 所 在 。 


隐 式 强制 类 型 转换 本 身 不 是 问题 的 根源 ， 因 为 [nutL] 在 显 式 强制 类 型 转换 中 也 是 转 
换 为 “。 问 题 在 于 将 数组 转换 为 字符 串 是 否 合理 ， 有 具体 该 如 何 处 理 。 所 以 实际 上 这 是 
String([..]) 规则 的 问题 。 又 或 者 根本 就 不 应 该 将 数组 转换 为 字符 串 ? 但 这 样 一 来 又 会 导 
致 很 多 其 他 问题 。 


还 有 一 个 坑 常 常 被 提 到 : 




















0 == "\n"; // true 








前 面 介绍 过 ,""、"\n”( 或 者 "" 等 其 他 空格 组 合 ) 等 空 字符 串 被 ToNumber 强制 类 型 转换 
为 6。 这 样 处 理 总 没有 问题 了 吧 ， 不 然 你 要 怎么 办 ? 

















或 许可 以 将 空 字符 串 和 空格 转换 为 NaN， 这 样 ””== NaN 就 为 false 了 ， 然 而 这 并 没有 从 
根本 上 解决 问题 。 


9 =="\n" 导致 程序 出 错 的 几率 小 之 又 小 ， 很 容易 避免 。 


类 型 转换 总 会 出 现 一 些 特殊 情况 ， 并 非 只 有 强制 类 型 转换 ， 任 何 编程 语言 都 是 如 此 。 问 题 
出 在 我 们 的 腾 断 (有 时 或 许 碰巧 猪 对 了 ? ! )， 但 这 并 不 能 成 为 诉 病 强制 类 型 转换 机 制 的 
理由 。 


上 述 7 种 情况 基本 涵盖 了 所 有 我 们 可 能 遇 到 的 坑 ( 除 修改 value0f() 和 tostrign() 的 情况 
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以 外 )。 





与 前 面 24 种 情况 列表 相对 应 的 是 下 面 这 个 列表 : 














42 == "43"; // false 
"foo" == 42; // false 
"true" == true; // false 
42 == "42"; // true 
"foo" == [ "foo" ]; // true 











这 些 是 非 假 值 的 常规 情况 (实际 上 还 可 以 加 上 无 穷 大 数字 的 相等 比较 )， 其 中 涉及 的 强制 
类 型 转换 是 安全 的 ， 也 比较 好 理解 。 
4. 完整 性 检查 
我 们 深入 介绍 了 隐 式 强制 类 型 转换 中 的 一 些 特殊 情况 。 也 难怪 大 多 数 开 发 人 员 都 觉得 这 太 
星 涩 ， 唯 处 避 之 不 及 。 






































现在 回 过 头 来 做 一 下 完整 性 检查 (sanity check)。 








一 | 











前 面 列 举 了 相等 比较 中 的 强制 类 型 转换 的 7 个 坑 ， 不 过 另外 还 有 至 少 17 种 情况 是 绝对 安 
全 和 容易 理解 的 。 





因为 7 棵 焉 脖 树 而 放弃 整 片 森林 似乎 有 点 因 哮 废 食 了 ， 所 以 明智 的 做 法 是 扬 其 长 避 其 短 。 
再 来 看 看 那些 “ 短 ” 的 地 方 : 





"0" == false; // true -- 晕 ! 
false == 0; // true -- 晕 ! 
false == ""; // true -- 晕 ! 
false es // true -- 晕 ! 
== 0; // true -- 晕 ! 

= []; // true -- 党! 

0 == 二 | 


其 中 有 4 种 情况 涉及 == fatse， 之 前 我 们 说 过 应 该 避免 ， 应 该 不 难 掌握 。 
现在 剩 下 3 种 : 


'" == 0; // true -- 学! 
== []; 17 true ~ 尝 ] 
0 == []; J true …* 浮 | 





el i ee == [] 来 做 条 件 判 断 ， 而 
是 用 =="" 或 者 == 0， 如 : 
function doSomething(a) { 


Us 
人 
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} 
} 


如 果 不 小 心 碰 到 dosomething(0) 和 doSomething([]) 这 样 的 情况 ， 结 果 会 让 你 大 吃 一 惊 。 
又 如 : 





function doSomething(a,b) { 
if (a == b) { 
J a 
} 
3 


doSomething("",0) 和 doSomething([],"") 也 会 如 此 。 
这 些 特 殊 情况 会 导致 各 种 问题 ， 我 们 要 多 加 小 心 ， 好 在 它们 并 不 十 分 常见。 


5. 安全 运用 隐 式 强制 类 型 转换 
我 们 要 对 == 两 边 的 值 认 真 推 殴 ， 以 下 两 个 原则 可 以 让 我 们 有 效 地 避免 出 错 。 


。 如 果 两 边 的 值 中 有 true 或 者 faLse， 千 万 不 要 使 用 ==。 
。 如 果 两 边 的 值 中 有 []、"" 或 者 9， 尽量 不 要 使 用 ==。 


这 时 最 好 用 === 来 避免 不 经 意 的 强制 类 型 转换 。 这 两 个 原则 可 以 让 我 们 避 开 几乎 所 有 强制 
类 型 转换 的 坑 。 


这 种 情况 下 强制 类 型 转换 越 显 式 越 好 ， 能 省 去 很 多 麻烦 。 
所 以 == 和 === 选择 哪 一 个 取决 于 是 否 允 许 在 相等 比较 中 发 生 强 制 类 型 转换 。 
强制 类 型 转换 在 很 多 地 方 非常 有 用 ， 能 够 让 相等 比较 更 简洁 (比如 null 和 undefined)。 





隐 式 强制 类 型 转换 在 部 分 情况 下 确实 很 危险 ， 这 时 为 了 安全 起 见 就 要 使 用 ===。 





有 一 种 情况 下 强制 类 型 转换 是 绝对 安全 的 ， 那 就 是 typeof 操作 。typeof 总 是 
返回 七 个 字符 串 之 一 (参见 第 1 章 )， 其 中 没有 空 字符 串 。 所 以 在 类 型 检查 
过 程 中 不 会 发 生 隐 式 强制 类 型 转换 。typeof x == "function" 是 100% 安全 
的 ， 和 typeof x === "function" 一 样 。 事 实 上 两 者 在 规范 中 是 一 回 事 。 所 
以 既 不 要 盲目 听命 于 代码 工具 每 一 处 都 用 ===， 更 不 要 对 这 个 问题 置 若 固 闻 。 
我 们 要 对 自己 的 代码 负责 。 
































隐 式 强制 类 型 转换 真 的 那么 不 堪 吗 ? 某 些 情况 下 是 ， 但 总 的 来 说 并 非 如 此 。 





作为 一 个 成 熟 负 责 的 开发 人 员 ， 我 们 应 该 学 会 安全 有 效 地 运用 强制 类 型 转换 ( 显 式 和 隐 
式 )， 并 对 周围 的 同行 言传 身 教 。 











Alex Dorey (GitHub 用 户 名 @dorey) 在 GitHub 上 制作 了 一 张 图 表 ， 列 出 了 各 种 相等 比较 


的 情况 ， 如 





图 4-1 所 示 。 
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图 Mostly evaluates as 
one would expect. 








图 4-1: JavaScript 中 的 相等 比较 


4.6 ”抽象 关系 比较 


a <b 中 涉及 的 隐 式 强制 类 型 转换 不 太 引 人 注意 ， 不 过 还 是 很 有 必要 深入 了 解 一 下 。 





ES5 规范 11.8.5 节 定 义 了 “抽象 关系 比较 ”(abstract relational comparison)， 分 为 两 个 部 


分 : 比较 双方 都 是 字符 串 (后 半 部 分 ) 和 其 他 情况 (前半 部 分 )。 





比较 双方 首先 调用 ToPrimitive， 如 果 

















制 类 型 转换 为 数字 来 进行 比较 。 


例如 : 
var a=[ 42 |]; 
var b= [ "43" ]; 


引 
采 





该 算法 仅 针对 a < b，a=""> b 会 被 处 理 为 b <> 


出 现 非 字 符 串 ， 就 根据 ToNumber 规则 将 双方 强 
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a<b; //true 
b <a; // false 


前 面 介绍 过 的 -9 和 NaN 的 相关 规则 在 这 里 也 适用 。 





如 果 比 较 双 方 都 是 字符 串 ， 则 按 字 母 顺序 来 进行 比较 : 


var a 
var b 


[ "42" J; 
[ "043" ]; 


a < b; // false 





a 和 b 并 没有 被 转换 为 数字 ， 因 为 ToPrimitive 返回 的 是 字符 串 ， 所 以 这 里 比较 的 是 "42" 
和 "643" 两 个 字符 串 ， 它 们 分 别 以 "4" 和 "9" 开头 。 因 为 "9" 在 字母 顺序 上 小 于 "4"， 所 以 
最 后 结果 为 false。 











同 理 : 





] 


[ 4，2 ]; 
[ 09, 4, 3 ]; 


a < b; // false 


a 转换 为 "4，2"，b 转换 为 "0，4，3"， 同 样 是 按 字母 顺序 进行 比较 。 





再 比如 : 
var a={b: 42}; 
var b= {b: 43}; 
a<b; //?? 


结果 还 是 false， 因 为 a 是 [object 0bject], b 也 是 [object 0bject]， 所 以 按照 字母 顺序 
a < b 并 不 成 立 。 

















下 面 的 例子 就 有 些 奇 怪 了 : 
var a={b: 42}; 
var b= {b: 43}; 


a < b; // false 
a == b; // false 
a>b; // false 


a <= b; // true 
a >= b; // true 





太后 
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为 什么 a == b 的 结果 不 是 true ? 它们 的 字符 串 值 相同 〈 同 为 "[object 0bject]")， 按 道 
理应 该 相等 才 对 ? 实际 上 不 是 这 样 ， 你 可 以 回忆 一 下 前 面 讲 过 的 对 象 的 相等 比较 。 














但 是 如 果 a < b 和 a == b 结果 为 false， 为 什么 a <= b 和 a >= b 的 结果 会 是 true 呢 ? 


因为 根据 规范 a <= b 被 处 理 为 bp < a， 然 后 将 结果 反 转 。 因 为 b < a 的 结果 是 false， 所 
以 a <= b 的 结果 是 true。 



































这 可 能 与 我 们 设想 的 大 相 径 庭 ， 即 <= 应 该 是 “小 于 或 者 等 于 ”。 实 际 上 JavaScript 中 <= 是 
“不 大 于 ”的 意思 ( 即 !(a > b)， 处 理 为 !(b < a))。 同 理 a >= b 处 理 为 b <= a。 




















相等 比较 有 严格 相等 ， 关 系 比较 却 没 有 “严格 关系 比较 ”(strict relational comparison) 。 也 
就 是 说 如 果 要 避免 a < b 中 发 生 隐 式 强制 类 型 转换 ， 我 们 只 能 确保 a 和 6b 为 相同 的 类 型 ， 
除 此 之 外 别 无 他 法 。 


与 == 和 === 的 完整 性 检查 一 样 ， 我 们 应 该 在 必要 和 安全 的 情况 下 使 用 强制 类 型 转换 ， 如 : 
42 <“43" 。 换 名 话说 就 是 为 了 保证 安全 ， 应 该 对 关系 比较 中 的 值 进行 显 式 强制 类 型 转换 : 











vara= [42]; 
var b = "043"; 





a < b; // false -- 字符 串 比 较 ! 
Number( a ) < Number( b ); // true -- 数字 比较 | 


7 :i 结 
本 章 介绍 了 JavaScript 的 数据 类 型 之 间 的 转换 ， 即 强制 类 型 转换 : 包括 显 式 和 隐 式 。 


强制 类 型 转换 常常 为 人 诉 病 ， 但 实际 上 很 多 时 候 它们 是 非常 有 用 的 。 作 为 有 使 命 感 的 
JavaScript 开发 人 员 ， 我 们 有 必要 深入 了 解 强 制 类 型 转换 ， 这 样 就 能 取 其 精华 ， 去 其 糟粕 。 
显 式 强制 类 型 转换 明确 告诉 我 们 哪里 发 生 了 类 型 转换 ， 有 助 于 提高 代码 可 读 性 和 可 维 
护 性 。 

隐 式 强制 类 型 转换 则 没有 那么 明显 ， 是 其 他 操作 的 副作用 。 感 觉 上 好 像 是 显 式 强制 类 型 转 
换 的 反面 ， 实 际 上 隐 式 强制 类 型 转换 也 有 助 于 提高 代码 的 可 读 性 。 


在 处 理 强 制 类 型 转换 的 时 候 要 十 分 小 心 ， 尤 其 是 隐 式 强制 类 型 转换 。 在 编码 的 时 候 ， 要 知 
其 然 ， 还 要 知 其 所 以 然 ， 并 努力 让 代码 清晰 易 读 。 
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语法 (grammar) 是 本 部 分 讨论 的 最 后 一 个 重点 。 也 许 你 觉得 自己 已 经 会 用 JavaScript 编程 
了 了， 然而 JavaScript 语法 中 仍然 有 很 多 地 方 容易 产生 困惑 、 造 成 误解 ， 本 章 将 对 此 进行 深 
入 的 介绍 。 





相 比 “词法 ”(syntax),“ 语 法 ”一 词 对 读者 来 说 可 能 更 卫生 一 些 。 很 多 时 
候 二 者 是 同一 个 意思 ， 都 是 语言 规则 的 定义 。 虽 然 它 们 之 间 有 一 些微 小 的 差 
别 ， 但 我 们 这 里 可 以 忽略 不 计 。JavaScript 语法 定义 了 词法 规则 (syntax rule， 
如 运算 符 和 关键 词 等 ) 是 如 何 构成 可 运行 的 程序 代码 的 。 换 名 话说 ， 只 看 词 
法 不 看 语法 会 遗漏 掉 很 多 重要 的 细节 。 所 以 准确 地 说 ， 本 章 介绍 的 是 语法 ， 
虽然 和 开发 人 员 直 接 打 交道 的 是 词法 。 








5.1 语句 和 表达 式 


开发 人 员 常 常 将 “语句 ”(statement) 和 “表达 式 ”(expression) 混为一谈 ， 但 这 里 我 们 要 
将 二 者 区 别 开 来 ， 因 为 它们 在 JavaScript 中 存在 一 些 重要 差别 。 





你 应 该 对 英语 更 熟悉 ， 这 里 我 们 就 借用 它 的 术语 来 说 明 问 题 。 


“句子 ”(sentence) 是 完整 表达 某 个 意思 的 一 组 词 ， 由 一 个 或 多 个 “短语 ” (phrase) 组 成 ， 
它们 之 间 由 标点 符号 或 连接 词 (and 和 or 等 ) 连接 起 来 。 短 语 可 以 由 更 小 的 短语 组 成 。 有 
些 短语 是 不 完整 的 ， 不 能 独立 表达 意思 ， 有 些 短语 则 相对 完整 ， 并 且 能 够 独立 表达 某 个 意 
思 。 这 些 规 则 就 是 英语 的 语法 。 
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JavaScript 的 语法 也 是 如 此 。 语 名 相当 于 句子 ， 表 达 式 相当 于 短语 ， 运 算 符 则 相当 于 标点 
符号 和 连接 词 























JavaScript 中 表达 式 可 以 返回 一 个 结果 值 。 例 如 : 


var a=3*6; 

var b = a; 

b; 
这 里 ，3 * 6 是 一 个 表达 式 (结果 为 18)。 第 二 行 的 a 也 是 一 个 表达 式 ， 第 三 行 的 b 也是。 
表达 式 a 和 bb 的 结果 值 都 是 18。 
这 三 行 代码 都 是 包含 表达 式 的 语句 。var a = 3 * 6 和 var b = a 称 为 “声明 语句 ” 
(declaration statement) ， 因 为 它们 声明 了 变量 (还 可 以 为 其 赋值 )。a = 3 * 6 和 b = a (不 
带 var) 叫 作 “赋值 表达 式 ”。 
第 三 行 代 码 中 只 有 一 个 表达 式 b， 同 时 它 也 是 一 个 语句 (虽然 没有 太 大 意义 )。 这 样 的 情况 
通常 叫 作 “表达 式 语句 ”(expression statement)。 


5.1.1 语句 的 结果 值 


很 多 人 不 知道 ， 语 名 都 有 一 个 结果 值 (statement completion value，undefined 也 算 )。 


























获得 结果 值 最 直接 的 方法 是 在 浏览 器 开发 控制 台中 输入 语句 ， 默 认 情 况 下 控制 台 会 显示 所 
执行 的 最 后 一 条 语句 的 结果 值 。 


以 赋值 表达 式 b = a 为 例 ， 其 结果 值 是 赋 给 b 的 值 (18)， 但 规范 定义 var 的 结果 值 是 
undefined。 如 果 在 控制 台中 输入 var a = 42 会 得 到 结果 值 undefined， 而 非 42。 

















从 技术 角度 来 解释 要 更 复杂 一 些 。ES5 规 范 122 节 中 的 变量 声明 
(VariableDeclaration) 算法 实际 上 有 一 个 返回 值 (是 一 个 包含 所 声明 变量 
名 称 的 字符 串 ， 很 奇特 吧 ?) ， 但 是 这 个 值 被 变量 语句 (Variabtestatenent) 
算法 屏蔽 掉 了 (for. .in 循环 除外 )， 最 后 返回 结果 为 空 (undefined)。 

















如 果 你 用 开发 控制 台 (或 者 JavaScript REPL read/evaluate/print/loop 工具 ) 调试 过 代 
码 ， 应 该 会 看 到 很 多 语句 的 返回 值 显示 为 undefined， 只 是 你 可 能 从 未 探究 过 其 中 的 原因 。 
其 实 控制 台中 显示 的 就 是 语句 的 结果 值 。 

但 我 们 在 代码 中 是 没有 办 法 获得 这 个 结果 值 的 ， 有 具体 解决 方法 比较 复杂 ， 首 先 得 弄 请 楚 为 
什么 要 获得 语句 的 结果 值 。 


先 来 看 看 其 他 语句 的 结果 值 。 比 如 代码 块 { .. 3} 的 结果 值 是 其 最 后 一 个 语句 /表达 式 的 
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结果 。 
例如 : 
var b; 
if (true) { 
b=4+ 38; 


} 


在 控制 台 /REPL 中 输入 以 上 代码 应 该 会 显示 42， 即 最 后 一 个 语句 /表达 式 b = 4 + 38 的 
结果 值 。 


换 句 话说 ， 代 码 块 的 结果 值 就 如 同一 个 隐 式 的 返回 ， 即 返回 最 后 一 个 语句 的 结果 值 。 





与 此 类 似 ，CoffeeScript 中 的 函数 也 会 隐 式 地 返回 最 后 一 个 语句 的 结果 值 。 


但 下 面 这 样 的 代码 无 法 运行 : 
var a，b; 
a=if(true) { 
b=4+ 38; 
}; 
因为 语法 不 允许 我 们 获得 语句 的 结果 值 并 将 其 赋值 给 另 一 个 变量 (至 少 目前 不 行 )。 


那 应 该 怎样 获得 语句 的 结果 值 呢 ? 





pb 

















以 下 代码 仅 为 演示 ， 切 勿 在 实际 开发 中 这 样 操作 ! 





可 以 使 用 万 恶 的 eval(..) (又 读 作 “evil”) 来 获得 结果 值 : 
var a, b; 
a = eval( "if (true) {b = 4 + 38; }" ); 
a; // 42 


这 并 不 是 个 好 办 法 ， 但 确实 管用 。 
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ES7 规范 有 一 项 “do 表达 式 ”(do expression) 提案 ， 类 似 下 面 这 样 : 


var a, b; 
a=dof 
if (true) { 
b=4+ 38; 
} 
到 
a; // 42 


上 例 中 ，do { .. } 表 达 式 执行 一 个 代码 块 (包含 一 个 或 多 个 语句 )， 并 且 返 回 其 中 最 后 一 
个 语句 的 结果 值 ， 然 后 赋值 给 变量 a。 


其 目的 是 将 语句 当 作 表 达 式 来 处 理 (语句 中 可 以 包含 其 他 语句 )， 从 而 不 需要 将 语句 封装 
为 函数 再 调用 return 来 返回 值 。 




















虽然 目前 语句 的 结果 值 还 无 关 紧要 ， 但 随 着 JavaScript 语言 的 演进 ， 它 可 能 会 扮演 越 来 越 
重要 的 角色 。 希望 do { .. } 表达 式 的 引入 能 够 减少 对 eval(..) 这 类 方法 的 使 用 。 




















再 次 强调 : 不 要 使 用 eval(..)。 详 情 请 参见 《你 不 知道 的 JavaScript (上 
卷 )》 的 “作用 域 和 闭 包 ” 部 分 。 


5.1.2 ”表达 式 的 副作用 
大 部 分 表达 式 没有 副作用 。 例 如 : 


var a = 2; 
varb=a+3; 


表达 式 a + 3 本 身 没有 副作用 (比如 改变 a 的 值 )。 它 的 结果 值 为 5， 通 过 b = a + 3 赋值 
给 变量 b。 
最 常见 的 有 副作用 (也 可 能 没有 ) 的 表达 式 是 国 数 调 用 : 
function foo() { 
a=a+l1; 


} 


var a = 1; 


foo(); // 结果 值 :undefined, 副 作用 :a 的 值 被 改变 
其 他 一 些 表 达 式 也 有 副作用 ， 比 如 : 
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var a = 42; 
var b = a++; 














at+ 首先 返回 变量 a 的 当前 值 42 (再 将 该 值 赋 给 b)， 然 后 将 a 的 值 加 1: 











var a = 42; 
var b = a++; 


a; // 43 
b; // 42 

















很 多 开发 人 员 误 以 为 变量 b 和 a 的 值 都 是 43， 这 是 因为 没有 完全 理解 ++ 运算 符 的 副作用 
何 时 产生 。 





递增 运算 符 ++ 和 递减 运算 符 -- 都 是 一 元 运算 符 (参见 第 4 章 )， 它 们 既 可 以 用 在 操作 数 的 
前 面 ， 也 可 以 用 在 后 面 : 




















var a = 42; 


a++; // 42 
a; // 43 


++a; // 44 
a; // 44 





++ 在 前 面 时 ， 如 ++a， 它 的 副作用 (将 递增 ) 产生 在 表达 式 返 回 结果 值 之 前 ， 而 at+ 的 
副作用 则 产生 在 之 后 。 











+tat+ 会 产生 ReferenceError 错误 ， 因 为 运算 符 需 要 将 产生 的 副作用 赋值 给 
一 个 变量 。 以 ++at+ 为 例 ， 它 首先 执行 at+ (根据 运算 符 优先 级 ， 如 下 )， 返 
回 42， 然 后 执行 ++42， 这 时 会 产生 ReferenceError 错误 ， 因 为 ++ 无 法 直接 
在 42 这 样 的 值 上 产生 副作用 。 





常 有 人 误 以 为 可 以 用 括号 ( ) 将 at+t 的 副作用 封装 起 来 ， 例 如 : 


var a = 42; 
var b = (at+); 


a; // 43 
b; // 42 


事实 并 非 如 此 。( ) 本 身 并 不 是 一 个 封装 表达 式 ， 不 会 在 表达 式 at+ 产生 副作用 之 后 执行 。 


即便 可 以 ，a++ 会 首先 返回 42， 除 非 有 表达 式 在 ++ 之 后 再 次 对 a 进行 运算 ， 否 则 还 是 不 会 
得 到 43， 也 就 不 能 将 43 赋值 给 b。 





但 也 不 是 没有 办 法 ， 可 以 使 用 , 语句 系列 逗号 运算 符 (statement-series comma operator) 将 





多 个 独立 的 表达 式 语 名 串联 成 一 个 语句 : 


var a = 42, b; 
b= ( att+, a ); 


a; // 43 
b; // 43 





由 于 运算 符 优先 级 的 关系 ，at+， a 需要 放 到 ( .. ) 中 。 本 章 后 面 将 会 介绍 。 

















at+，a 中 第 二 个 表达 式 a 在 ar+ 之 后 执行 ， 结 果 为 3， 并 被 赋值 给 b。 


再 如 delete 运算 符 。 第 2 章 讲 过 ，detete 用 来 删除 对 象 中 的 属性 和 数组 中 的 单元 。 它 通 
常 以 单独 一 个 语句 的 形式 出 现 : 








var obj = { 
a: 42 
}3 
obj.a; // 42 
delete obj.a; // true 
obj.a; // undefined 





如 果 操 作成 功 ，delete 返回 true， 否 则 返回 false。 其 副作用 是 属性 被 从 对 象 中 删除 (或 
者 单元 从 array 中 删除 )。 








操作 成 功 是 指 对 于 那些 不 存在 或 者 存在 且 可 配置 (configurable， 参 见 《 你 不 
知道 的 JavaScript (上 卷 )》 的 “this 和 对 象 原 型 ”部 分 的 第 3 章 ) 的 属性 ， 
delete 返回 true， 否 则 返回 false 或 者 报错 。 








另 一 个 有 趣 的 例子 是 = 赋值 运算 符 。 


例如 : 
var a; 
a = 42; 1/ 42 
a; // 42 
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组 合 赋值 运算 符 ， 如 += 和 -= 等 也 是 如 此 。 例 如 ，a = b += 2 首先 执行 b += 
2 ( 即 b = b + 2)， 然 后 结果 再 被 赋值 给 a。 





























多 个 赋值 语句 串联 时 〈 链 式 赋值 ，chained assignment) ， 赋 值 表达 式 (和 语句 ) 的 结果 值 就 
能 派 上 用 场 ， 比 如 : 





var a, b, c; 


5-b sc 三 :425 


这 里 c = 42 的 结果 值 为 42 (副作用 是 将 < 赋值 42)， 然 后 b = 42 的 结果 值 为 42 (副作用 
是 将 pb 赋值 42)， 最 后 是 a = 42 (副作用 是 将 a 赋值 42)。 





链 式 赋值 常常 被 误 用 ， 例 如 var a = b = 42， 看 似 和 前 面 的 例子 差不多 ， 实 
则 不 然 。 如 果 变 量 b 没有 在 作用 域 中 象 var b 这 样 声明 过 , 则 var a = b = 
42 不 会 对 变量 b 进行 声明 。 在 严格 模式 中 这 样 会 产生 错误 ， 或 者 会 无 意 中 
创建 一 个 全 局 变量 (参见 《你 不 知道 的 JavaScript (上 卷 )》 的 “作用 域 和 闭 
包 ” 部 分 )。 








另 一 个 需要 注意 的 问题 是 ， 


function vowels(str) { 
var matches; 


if (str) { 
// 提取 所 有 元 音字 母 
matches = str.match( /[aeiou]/g ); 


if (matches) { 
return matches; 
} 
} 
} 


vowels( "Hello World" ); // ["e","o","o"] 





上 面 的 代码 没 问 题 ， 很 多 开发 人 员 也 喜欢 这 样 做 。 其 实 我 们 可 以 利用 赋值 语句 的 副作用 将 
两 个 if 语句 合 二 为 一 : 


function vowels(str) { 
var matches; 


// 提取 所 有 元 音字 母 
if (str && (matches = str.match( /[aeiou]/g ))) { 
return matches; 
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} 
} 


vowels( "Hello World" ); // ["e","o","o"] 


将 matches = str.match.. 放 到 ( .. ) 中 是 必要 的 ， 原 因 请 参见 5.2 节 。 











我 更 偏向 后 者 ， 因 为 它 更 简洁 ， 能 体现 两 个 条 件 的 关联 性 。 不 过 这 
对 错 。 


并 
外 
人 
> 
发 
水 
证 
沙 


5.1.3 上下文 规 则 
在 JavaScript 语法 规则 中 ， 有 了 时候 同样 的 语法 在 不 同 的 情况 下 会 有 不 同 的 解释 。 这 些 语法 
规则 孤立 起 来 会 很 难 理解 。 





这 里 我 们 不 一 一 列举 ， 只 介绍 一 些 常见 情况 。 


1. 大 括号 
下 面 两 种 情况 会 用 到 大 括号 { .. } ( 随 着 JavaScript 的 演进 会 出 现 更 多 类 似 的 情况 ) 。 





(1) 对 象 常量 
用 大 括号 定义 对 象 常量 (object literal) : 


// 假定 函数 bar() 已 经 定义 


var a={ 
foo: bar() 


{ … 被 赋值 给 a， 因而 它 是 一 个 对 象 常量 。 


a 是 赋值 的 对 象 ， 称 为 “ 左 值 ”(l-value)。{ .. } 是 所 赋 的 值 ( 即 本 例 中 赋 
给 变量 a 的 值 )， 称 为 “ 右 值 ”(rvalue)。 





(2) 标签 


如 有 果 将 上 例 中 的 var a = 去掉 会 发 生 什么 情况 呢 ? 


// 假定 函数 bar() 已 经 定义 
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foo: bar() 
} 





很 多 开发 人 员 以 为 这 里 的 { .. } 只 是 一 个 白 立 的 对 象 常 量 ， 没 有 赋值 。 事 实 上 不 是 这 样 。 





{ .. 】} 在 这 里 只 是 一 个 普通 的 代码 块 。JavaScript 中 这 种 情况 并 不 多 见 (在 其 他 语言 中 则 
常见 得 多 )， 但 语法 上 是 完 全 合法 的 ， 特 别 是 和 let ( 块 作用 域 声 明 ) 在 一 起 时 非常 有 用 
参见 《你 不 知道 的 JavaScript (上 卷 )》 的 “作用 域 和 闭 包 ”部 分 )。 








Wy 


{ .. } 和 for/while 循环 以 及 if 条 件 语 句 中 代码 块 的 作用 基本 相同 。 


但 foo: bar() 这 样 奇怪 的 语法 为 什么 也 合法 呢 ? 





这 里 涉及 JavaScript 中 一 个 不 太 为 人 知 (也 不 建议 使 用 ) 的 特性 ， 叫 作 “ 标 签 语句 ” 
(labeled statement) 。foo 是 语句 bar() 的 标签 (后面 没有 ;， 参 见 5.3 节 )。 标 签 语句 具体 
是 做 什么 用 的 呢 ? 


























如 果 JavaScript 有 goto 语句 ， 理 论 上 我 们 可 以 使 用 goto foo 跳 转 到 foo 处 执行 。goto 被 公 
认为 是 一 种 极为 糟 糕 的 编码 方式 ， 它 会 让 代码 变 得 上 滁 难 懂 (也 叫 作 spaghetti code) ， 好 
在 JavaScript 不 支持 goto。 




















然而 JavaScript 通过 标签 跳 转 能 够 实现 goto 的 部 分 功能 。continue 和 break 语句 都 可 以 带 
一 个 标签 ， 因 此 能 够 像 goto 那样 进行 跳 转 。 例 如 : 





// 标签 为 foo 的 循环 
foo: for (var i=0; i<4; i++) { 
for (var j=0; j<4; j++) { 
// 如 果 j 和 if 相等 ,继续 外 层 循 环 
if (j == i) { 
// 跳 转 到 foo 的 下 一 个 循环 
continue foo; 


» 


// 跳 过 奇数 结果 
if ((j * i)%2 == 1){ 
// 继续 内 层 人 循环 (没有 标签 的 ) 


continue; 





} 


console.log( i, j ); 





contine foo 并 不 是 指 “ 跳 转 到 标签 foo 所 在 位 置 继续 执行 ”， 而 是 “执行 
foo 循环 的 下 一 轮 循环 " 。 所 以 这 里 的 foo 并 非 goto。 








上 例 中 continue 跳 过 了 循环 3 1，continue foo ( 带 标签 的 循环 跳 转 ，labeled-loop jump) 
跳 过 了 循环 11 和 2 2。 








带 标签 的 循环 跳 转 一 个 更 大 的 用 处 在 于 ， 和 break __ 一 起 使 用 可 以 实现 从 内 层 人 循环 跳 转 到 
外 层 人 循环 。 没 有 它们 的 话 实现 起 来 有 时 会 非常 麻烦 : 


// 标签 为 foo 的 循环 
foo: for (var i=0; i<4; i++) { 
for (var j=0; j<4; j++) { 
if ((i * j) >= 3) { 
console.log( "stopping!", i, j ); 


break foo; 
} 
console.log( i, j ); 
} 

} 

// 00 

// 01 

//02 

//03 

// 10 

yn Wl 

大 /工法 

// 停止 ! 13 


break foo 不 是 指 “ 跳 转 到 标签 foo 所 在 位 置 继续 执行 ”， 而 是 “跳出 标签 
foo 所 在 的 循环 / 代码 块 ， 继 续 执 行 后 面 的 代码 "。 因 此 它 并 非 传统 意义 上 的 
goto。 











上 例 中 如 果 使 用 不 带 标 签 的 break， 就 可 能 需要 用 到 一 两 个 函数 调用 和 共享 作用 域 的 变量 
等 ， 这 样 代码 会 更 难 懂 ， 使 用 带 标签 的 break 可 能 更 好 一 些 。 





标签 也 能 用 于 非 循环 代码 块 ， 但 只 有 break 才 可 以 。 我 们 可 以 对 带 标签 的 代码 块 使 用 
break __， 但 是 不 能 对 带 标签 的 非 循环 代码 块 使 用 continue __， 也 不 能 对 不 带 标 签 的 代 
码 块 使 用 break: 





// 标签 为 bar 的 代码 块 
function foo() { 
bar: { 
console.log( "Hello" ); 
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break bar; 
console.log( "never runs" ); 


console.log( "World" ); 
} 


foo(); 
// Hello 
// World 


带 标 签 的 循环 /代码 块 十 分 少见 ， 也 不 建议 使 用 。 例 如 ， 循 环 跳 转 也 可 以 通过 函数 调用 来 
实现 。 不 过 在 某 些 情况 下 它们 也 能 派 上 用 场 ， 这 时 请 务必 将 注释 写 清楚 ! 














JSON 被 普遍 认为 是 JavaScript 语言 的 一 个 真子 集 ，{"a":42} 这 样 的 JSON 字符 串 会 被 当 作 
合法 的 JavaScript 代码 (请 注意 JSON 属性 名 必须 使 用 双 引 号 ! )。 其 实 不 是 ! 如 果 在 控制 
台中 输入 {"a":42} 会 报错 。 




















因为 标签 不 允许 使 用 双 引 号 ， 所 以 "a" 并 不 是 一 个 合法 的 标签 ， 因 此 后 面 不 能 带 :。 














JSON 的 确 是 JavaScript 语法 的 一 个 子 集 ， 但 是 JSON 本 身 并 不 是 合法 的 JavaScript 语法 。 

















这 里 存在 一 个 十 分 常见 的 误区 ， 即 如 果 通 过 <script src=. .> 标签 加 载 JavaScript 文件 ， 其 
只 包含 JSON 数据 (比如 某 个 API 返回 的 结果 )， 那 它 就 会 被 当 作 合 法 的 JavaScript 代码 
来 解析 ， 只 不 过 其 内 容 无 法 被 程序 代码 访问 到 。JSON-P (将 JSON 数据 封装 为 函数 调用 ， 
比如 foo({"a":42})) 通过 将 JSON 数据 传递 给 函数 来 实现 对 其 的 访问 。 


{"a":42} 作为 ISON 值 没有 任何 问题 ， 但 是 在 作为 代码 执行 时 会 产生 错误 ， 因 为 它 会 被 当 
作 一 个 带 有 非法 标签 的 语句 块 来 执行 。foo({"a":42}) 就 没有 这 个 问题 ， 因 为 {"a":42} 在 
这 里 是 一 个 传递 给 foo(..) 的 对 象 常 量 。 所 以 准确 地 说 ，JSON-P 能 将 JSON 转换 为 合法 的 


JavaScript 语法 。 
























































2. 代码 块 
还 有 一 个 坑 常 被 提 到 (涉及 强制 类 型 转换 ， 参 见 第 4 章 ) : 


[] + {}; // "[object Object]" 
{} + []; // 9 


表面 上 看 + 运算 符 根 据 第 一 个 操作 数 ([] 或 们 ) 的 不 同 会 产生 不 同 的 结果 ， 实 则 不 然 。 


第 一 行 代码 中 ，{} 出 现在 + 运算 符 表 达 式 中 ， 因 此 它 被 当 作 一 个 值 ( 空 对 象 ) 来 处 理 。 第 
4 章 讲 过 [] 会 被 强制 类 型 转换 为 "， 而 {f 会 被 强制 类 型 转换 为 "[object 0bject]"。 

但 在 第 二 行 代码 中 ，{} 被 当 作 一 个 独立 的 空 代 码 块 (不 执行 任何 操作 )。 代 码 块 结尾 不 需 
要 分 号 ， 所 以 这 里 不 存在 语法 上 的 问题 。 最 后 + [] 将 [] 显 式 强制 类 型 转换 (参见 第 4 章 ) 
为 0。 









































3. 对 象 解构 


从 ES6 开始 , { .. } 也 可 用 于 “解构 赋值 ”(destructuring assignment， 详 情 请 参见 本 系列 的 


《你 不 知道 的 JavaScript (下 卷 )》 的 “ES6 & Beyond” 部 分 ) ， 特 别 是 对 象 的 解构 。 例 如 : 


function getData() { 
J ws 
return { 
a: 42， 
b: "foo" 
}; 
} 


var { a, b } = getData(); 


console.log( a, b ); // 42 "foo" 





{ a ，b } = .就 是 ES6 中 的 解构 赋值 ， 相 当 于 下 面 的 代码 : 


芝 














var res = getData() ; 
var a = res.a; 
var b = res.b; 


更 简洁 。 





{ a, b } 实 际 上 是 { a: a, b: b } 的 简化 版 本 ， 两 者 均 可 ， 只 不 过 { a, b } 


{ .. 了 还 可 以 用 作 国 数 命 名 参数 (named function argument) 的 对 象 解构 (object destructuring ) ， 


方便 隐 式 地 用 对 象 属性 赋值 


function foo({ a, b, c }) { 
// 不 再 需要 这 样 : 
// var a = obj.a, b = obj.b, c = obj.c 
console.log( a, b, c ); 





} 

foo( { 
ee L1253]s 
a: 42， 
bi "fo0" 


});  // 42 "foo" [1, 2, 3] 





有 助 于 我 们 了 解 JavaScript 引擎 解析 代码 的 方式 。 


4. else if 和 可 选 代 码 块 
很 多 人 误 以 为 JavaScript 中 有 else if， 因 为 我 们 可 以 这 样 来 写 代 码 : 





在 不 同 的 上 下 文中 {.. } 的 作用 不 尽 相 同 ， 这 也 是 词法 和 语法 的 区 别 所 在 。 和 掌握 这 些 细节 
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} 
else if (b) { 
A 


事实 上 JavaScript 没 有 else if, 但 if 和 else 只 包含 单条 语句 的 时 候 可 以 省 略 代码 块 的 
{ }。 下 面 的 代码 你 一 定 不 会 陌生 : 


if (a) doSomething( a ); 
很 多 JavaScript 代码 检查 工具 建议 对 单条 语句 也 应 该 加 上 { }， 如 : 
if (a) { doSomething( a ); } 


else 也 是 如 此 ， 所 以 我 们 经 常用 到 的 else if 实际 上 是 这 样 的 : 


if (a) { 
// 
} 
else { 
if (b) { 
// . 
} 
else { 
// . 
} 
} 


if (b) { .. } else { .. } 实际 上 是 跟 在 else 后 面 的 一 个 单独 的 语句 ， 所 以 带 不 带 { } 都 
可 以 。 换 名 话说 ，etLse if 不 符合 前 面 介绍 的 编码 规范 ，eltse 中 是 一 个 单独 的 if 语句 。 








else if 极为 常 久 ， 能 省 掉 一 层 代码 缩 进 ， 所 以 很 受 青睐 。 但 这 只 是 我 们 自己 发 明 的 用 法 ， 
切 勿 想当然 地 认为 这 些 都 属于 JavaScript 语法 的 范畴 。 

一 5 
5.2 ”运算 符 优 先 级 


第 4 章 中 介绍 过 ，JavaScript 中 的 8&& 和 || 运算 符 返 回 它们 其 中 一 个 操作 数 的 值 ， 而 非 
true 或 false。 在 一 个 运算 符 两 个 操作 数 的 情况 下 这 比较 好 理解 : 






































var a = 42; 

var b = "foo"; 

a && b; // "foo" 
a || b; // 42 





A 
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那么 两 个 运算 符 三 个 操作 数 呢 ? 


var a = 42; 
var b = "foo"; 
var C = [1,2,3]; 


想 知道 结果 就 需要 了 解 超过 一 个 运算 符 时 表达 式 的 执行 顺序 。 
这 些 规则 被 称 为 “运算 符 优 先 级 ”(operator precedence)。 


估计 大 多 数 读者 都 会 认为 自己 已 经 掌握 了 运算 符 优先 级 。 这 里 我 们 秉承 本 系列 丛书 的 一 贯 
守则， 将 对 这 个 主题 进行 深入 探讨 ， 希 望 读 者 从 中 能 有 新 的 收获 。 








回顾 前 面 的 例子 : 











var a = 42, b; 
b= (att+, a ); 


a; // 43 
b; // 43 


如 有 果 去 掉 ( ) 会 出 现 什么 情况 ? 


var a = 42, b; 
b = at+, a; 


a; // 43 
b; // 42 





为 什么 上 面 两 个 例子 中 b 的 值 会 不 一 样 








一 




















原因 是 ,运算 符 的 优先 级 比 = 低 。 所 以 b = at+，a 其 实 可 以 理解 为 (b = a++)，a。 前 面 说 
过 ar+ 有 后 续 副作用 (after side effect) ， 所 以 b 的 值 是 ++ 对 a 做 递增 之 前 的 值 42。 

















这 只 是 一 个 简单 的 例子 。 请 务必 记 住 ， 用 ,来 连接 一 系列 语句 的 时 候 ， 它 的 优先 级 最 低 ， 
其 他 操作 数 的 优先 级 都 比 它 高 。 


回顾 前 面 的 一 个 例子 : 

















if (str && (matches = str.match( /[aeiou]/g ))) { 
//.. 
} 
这 里 对 赋值 语句 使 用 ( ) 是 必要 的 ， 因 为 && 运算 符 的 优先 级 高 于 =， 如 果 没 有 ( ) 对 其 中 
的 表达 式 进 行 绑 定 (bind) 的 话 ， 就 会 执行 作 (str && matches) = str.match..。 这 样 会 出 
错 ， 由 于 (str && matches) 的 结果 并 不 是 一 个 变量 ， 而 是 一 个 undefined 值 ， 因 此 它 不 能 
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出 现在 = 运算 符 的 左边 ! 


























下 面 再 来 看 一 个 更 复杂 的 例子 (本章 后 面 儿 节 都 将 用 到 ) : 
var a = 42; 
var b = "foo"; 
var c = false; 
var d=a&&b|l|c?c||b?a:c&&b :a; 


d; /33 


应 该 没有 人 会 写 出 这 样 鸭 怖 的 代码 ， 这 只 是 用 来 举例 说 明 多 个 运算 符 串 联 时 可 能 出 现 的 一 


些 常见 问题 。 





上 例 的 结果 是 12， 当然 只 要 运行 一 下 代码 就 能 够 知道 答案 ,但 是 弄 明白 其 中 的 来 龙 去 脉 更 


首先 我 们 要 搞 清 楚 (a && b 11 <) 执行 的 是 (a && b) || c 还 是 a && (b || c) ?它们 之 间 
有 什么 区 别 ? 


(false && true) || true; // true 
false && (true || true); // false 


事实 证 明 它们 是 有 区 别 的 ，false && true || true 的 执行 顺序 如 下 : 


false && true || true; // true 
(false && true) || true; // true 


&& 先 执行 ， 然 后 是 | |。 
那 执行 顺序 是 否 就 一 定 是 从 左 到 右 呢 ? 不 妨 将 运算 符 颠 倒 一 下 看 看 : 


true || false && false; // true 


(true || false) && false; // false 
true || (false && false); // true 





这 说 明 && 运算 符 先 于 || 执行 ， 而且 执行 顺序 并 非 我 们 所 设想 的 从 左 到 右 。 原 因 就 在 于 运 
算 符 优先 级 。 








每 门 语言 都 有 自己 的 运算 符 优 先 级 。 遗 憾 的 是 ， 对 JavaScript 运算 符 优先 级 有 深入 了 解 的 
开发 人 员 并 不 多 。 

如 果 我 们 明白 其 中 的 道理 ， 上 面 的 例子 就 是 小 茉 一 碟 。 不 过 估计 很 多 读者 看 到 上 面 儿 个 例 
子 时 还 是 需要 细 细 琢磨 一 番 。 
































遗憾 的 是 ，JavaScript 规范 对 运算 符 优先 级 并 没有 一 个 集中 的 介绍 ， 因 此 我 们 
需要 从 语法 规则 中 间 逐 一 了 解 。 下 面 列 出 一 些 常见 并 且 有 用 的 优先 级 规则 ， 
以 方便 查阅 。 完 整 列 表 请 参见 MDN 网 站 (https://developer.mozilla.org/en- 
US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) 上 的 “ 优 
先 级 列表 ”。 


























5.2.1 短路 
第 4 章 中 的 附注 栏 提 到 过 8& 和 || 运算 符 的 “短路 ”(short circuiting) 特性 。 下 面 我 们 将 
对 此 进行 详细 介绍 。 


对 && 和 1| 来 说 ， 如 果 从 左边 的 操作 数 能 够 得 出 结果 ， 就 可 以 忽略 右边 的 操作 数 。 我 们 将 
这 种 现象 称 为 “短路 ”( 即 执行 最 短路 径 )。 











以 a 8&& b 为 例 如 果 a 是 一 个 假 值 ， 足 以 决定 &8 的 结果 ， 就 没有 必要 再 判断 b 的 值 。 同 
样 对 于 a 11 b， 如 果 a 是 一 个 真 值 ， 也 足以 决定 上 | 的 结果 ， 也 就 没有 必要 再 判断 b 的 值 。 


“短路 ”很 方便 ， 也 很 常用 ， 如 : 








function doSomething(opts) { 
if (opts && opts.cool) { 
J 
} 
} 


opts && opts.cool 中 的 opts 条 件 判 断 如 同一 道 安全 保护 ， 因 为 如 果 opts 未 赋值 (或 者 
不 是 一 个 对 象 )， 表 达 式 opts.cool 会 出 错 。 通 过 使 用 短路 特性 ，opts 条 件 判断 未 通过 时 
opts.cool 就 不 会 执行 ， 也 就 不 会 产生 错误 ! 


11 运算 符 也 一 样 ， 








function doSomething(opts) { 
if (opts.cache || primeCache()) { 
ffs 
} 
} 


这 里 首先 判断 opts.cache 是 否 存 在 ， 如 果 是 则 无 需 调用 primeCache() 国 数 ， 这 样 可 以 避 
免 执 行 不 必要 的 代码 。 


5.2.2 ”更 强 的 绑 定 
回顾 一 下 前 面 多 个 运算 符 串联 在 一 起 的 例子 : 





ag&gb|llcy? cllb?a:cg&b:a 
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\ 中 





中 ? : 运算 符 的 优先 级 比 && 和 || 高 还 是 低 呢 ? 执行 顺序 是 这 样 ? 
ag&bll(c?cll(b?a:cg8g&b:a) 


还 是 这 样 ? 





(a&&b ||c)?(c||b)?a:(c&&b):a 
答案 是 后 者 。 因 为 && 运算 符 的 优先 级 高 于 11， 而 上 | 的 优先 级 又 高 于 ? :。 


因此 表达 式 (a && b || <c) 先 于 包含 它 的 ? : 运算 符 执 行 。 另 一 种 说 法 是 到 和 11 比 ? :的 
绑 定 更 强 。 反 过 来 ， 如 果 c ? c.… 的 绑 定 更 强 ， 执 行 顺序 就 会 变 成 a && b || (c ? c..)。 


5.2.3 关联 
&& 和 || 运算 符 先 于 ? : 执行 ， 那 么 如 果 多 个 相同 优先 级 的 运算 符 同 时 出 现 ， 又 该 如 何 处 
里 呢 ? 它们 的 执行 顺序 是 从 左 到 右 还 是 从 右 到 左 ? 


一 般 说 来 ， 运 算 符 的 关联 (associativity) 不 是 从 左 到 右 就 是 从 右 到 左 ， 这 取决 于 组 合 
(grouping) 是 从 左 开始 还 是 从 右 开始 。 














AH 





请 注意 : 关联 和 执行 顺序 不 是 一 回 事 。 
但 它 为 什么 又 和 执行 顺序 相关 呢 ? 原因 是 表达 式 可 能 会 产生 副作用 ， 比 如 函数 调用 : 








var a = foo() && bar(); 

















这 里 foo() 首先 执行 ， 它 的 返回 结果 决定 了 bar() 是 否 执行 。 所 以 如 果 bar() 在 foo() 之 
前 执行 ， 整 个 结果 会 完全 不 同 。 


这 里 遵循 从 左 到 右 的 顺序 (JavaScript 的 默认 执行 顺序 )， 与 8& 的 关联 无 关 。 因 为 上 例 中 只 
有 一 个 && 运算 符 ， 所 以 不 涉及 组 合 和 关联 。 














而 a && b && c 这 样 的 表达 式 就 涉及 组 合 ( 隐 式 )， 这 意味 着 a && b 或 b && < 会 先 执行 。 


从 技术 角度 来 说 ， 因 为 && 运算 符 是 左 关联 (1| 也 是 )， 所 以 a && b 8&& < 会 被 处 理 为 (a 
&& b) && c。 不 过 右 关 联 a && (b && c) 的 结果 也 一 样 。 





如 果 && 是 右 关联 的 话 会 被 处 理 为 a && (b && c)。 但 这 并 不 意味 着 c 会 在 b 
之 前 执行 。 右 关联 不 是 指 从 右 往 左 执行 ， 而 是 指 从 右 往 左 组 合 。 任 何 时 候 ， 
不 论 是 组 合 还 是 关联 ， 严 格 的 执行 顺序 都 应 该 是 从 左 到 右 ，a，b， 然 后 c。 











所 以 ，8&8& 和 || 运算 符 是 不 是 左 关联 这 个 问题 本 身 并 不 重要 ， 只 要 对 此 有 一 个 准确 的 定义 
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即 可 。 





但 情况 并 非 总 是 这 样 。 一 些 运 算 符 在 左 关联 和 右 关联 时 的 表现 截然 不 同 。 
比如 ? :( 即 三 元 运算 符 或 者 条 件 运 算 符 ) : 
a?7b:c?d:e; 
? : 是 右 关联 ， 它 的 组 合 顺序 是 以 下 哪 一 种 呢 ? 
a?7b:(c?d:e) 
(l(a?7b:c)?d:e 


答案 是 a ? b : (c ? d : e)。 和 && 以 及 || 运算 符 不 同 ， 右 关联 在 这 里 会 影响 返回 结果 ， 
因为 (a ? b : c) ? d : e 对 有 些 值 (并非 所 有 值 ) 的 处 理 方 式 会 有 所 不 同 。 


举 个 例子 : 




















true ? false : true ? true : true; // false 
true ? false : (true ? true : true); // false 
(true ? false : true) ? true : true; // true 








在 某 些 情况 下 ， 返 回 的 结果 没有 区 别 ， 但 其 中 却 有 十 分 微妙 的 差别 。 例 如 : 





true ? false : true ? true : false; // false 


true ? false : (true ? true : false); // false 
(true ? false : true) ? true : false; // false 





这 里 返回 的 结果 一 样 ， 运 算 符 组 合 看 似 没 起 什么 作用 。 然 而 实际 情况 是 : 
var a = true, b = false, c = true, d = true, e = false; 


a?7b:(c?d:e); // false, 执行 a 和 b 
(a?7b:c)?d:e;// false, 执行 ab 和 ee 





这 里 我 们 可 以 看 出 ，? : 是 右 关联 ， 并 且 它 的 组 合 方式 会 影响 返回 结果 。 
另 一 个 右 关联 (组 合 ) 的 例子 是 = 运算 符 。 本 章 前 面 介绍 过 一 个 串联 赋值 的 例子 : 








var a, b, c; 


a br 


它 首先 执行 c = 42， 然 后 是 b = ..， 最 后 是 a = ..。 因 为 是 右 关联 ， 所 以 它 实 际 上 是 这 样 
来 处 理 的 : a = (b = (c = 42))。 


再 看 看 本 章 前 面 那 个 更 为 复杂 的 赋值 表达 式 的 例子 : 
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var a = 42; 
var b = "foo"; 
var c = false; 


var d=a&&b|l|c?c||b?a:c&&b :a; 


d; // 42 


掌握 了 优先 级 和 关联 等 相关 知识 之 后 ， 就 能 够 根据 组 合 规则 将 上 面 的 代码 分 解 如 下 : 


((a &g&b) || c)? ((c||b)?a: (c&& b)) :a 





也 可 以 通过 缩 进 显 式 让 代码 更 容易 理解 : 


( 
(a && b) 


Ec 


) 


? 
( 
(c 11 b) 
? 


a 


(c 级 b) 
) 


a 


现在 来 逐一 执行 。 





(1) (a && b) 结果 为 "foo"。 
(2) "foo" || c 结果 为 "foo"。 
(3) 第 一 个 ?中 ,，"foo" 为 真 值 。 
(4) (c 11 b) 结果 为 "foo"。 
(5) 第 二 个 ? 中 ，"foo" 为 真 值 。 
(6)a 的 值 为 42。 




















因此 ， 最 后 结果 为 42。 


5.2.4 释疑 
现在 你 应 该 对 运算 符 优先 级 (和 关联 ) 有 了 更 深入 的 了 解 ， 多 个 运算 符 
话 下 。 








联 的 代码 也 不 在 


但 是 我 们 仍然 面临 着 一 个 重要 问题 ， 即 是 不 是 理解 和 遵守 了 运算 符 优先 级 和 关联 规则 就 万 
事 大 吉 了 ? 在 必要 时 是 否 应 该 使 用 ( ) 来 自行 控制 运算 符 的 组 合 和 执行 顺序 ? 
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换 甸 话说， 尽管 这 些 规则 是 可 以 学 习 和 和 掌握 的 ， 但 其 中 也 不 乏 问 题 和 陷阱 。 如 果 完 全 依赖 
它们 来 编码 ， 就 很 容易 掉 进 陷阱 。 那 么 是 否 应 该 经 常 使 用 ( ) 来 自行 控制 运算 符 的 执行 而 
不 再 依赖 系统 的 自动 操作 呢 ? 

正如 第 4 章 中 的 隐 式 强制 类 型 转换 ， 这 个 问题 仁者 见 仁 ， 智 者 见 智 。 对 于 两 者 ， 大 多 数 人 
的 看 法 都 是 : 要 么 完全 依赖 规则 编码 ， 要 么 完全 使 用 显 式 和 自行 控制 的 方式 。 

对 于 这 个 问题 ， 我 并 没有 一 个 明确 的 答案 。 它 们 各 自 的 优 缺 点 本 书 都 已 子 以 介绍 ， 希 望 能 
有 助 于 你 加 深 理 解 ， 从 而 做 出 自己 的 判断 。 

我 认为 ， 针 对 该 问题 有 个 折 中 之 策 ， 即 在 编写 程序 时 要 将 两 者 结合 起 来 ， 既 要 依赖 运算 符 
优先 级 /关联 规则 ， 也 要 适当 使 用 ( ) 自行 控制 方式 。 对 第 4 章 中 的 隐 式 强制 类 型 转换 也 
是 如 此 ， 我 们 应 该 安全 合理 地 运用 它们 ， 而 非 无 市 制 地 滥用 。 






































例如 ， 如 果 if (a && b && c) … 没 问 题 ， 我 就 不 会 使 用 if ((a && b) && c) ..， 因 为 这 
样 过 于 繁 天 。 


然而 ， 如 果 需 要 串联 两 个 ? : 运算 符 的 话 ， 我 就 会 使 用 ( ) 来 自行 控制 运算 符 的 组 合 ， 让 
代码 更 清晰 易 读 。 


所 以 我 的 建议 和 第 4 章 中 一 样 : 如 果 运 算 符 优先 级 /关联 规则 能 够 令 代码 更 为 简洁 ， 就 使 
用 运算 符 优先 级 / 关联 规则 ， 而 如 果 ( ) 有 助 于 提高 代码 可 读 性 ， 就 使 用 ( )。 


5.3 ”有 目 动 分 号 


有 时 JavaScript 会 自动 为 代码 行 补 上 缺失 的 分 号 ， 即 自动 分 号 插入 (Automatic Semicolon 
Insertion，ASI) 。 











因为 如 果 缺 失 了 必要 的 ;， 代 码 将 无 法 运行 ,语言 的 容错 性 也 会 降低 。ASI 能 让 我 们 忽略 
那些 不 必要 的 ;。 





请 注意 ，ASI 只 在 换行 符 处 起 作用 ， 而 不 会 在 代码 行 的 中 间 插 入 分 号 。 

















如 果 JavaScript 解析 器 发 现代 码 行 可 能 因为 缺失 分 号 而 导致 错误 ， 那 么 它 就 会 自动 补 上 分 
号 。 并 且 ， 只 有 在 代码 行 末尾 与 换行 符 之 间 除 了 空格 和 注释 之 外 没有 别 的 内 容 时 ， 它 才 会 
这 样 做 。 


例如 : 





var a = 42, b 
Cs 


如 果 b 和 < 之 间 出 现 a ,的 话 (即使 另 起 一 行 )，c 会 被 作为 var 语句 的 一 部 分 来 处 理 。 在 
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上 例 中 ，JavaScript 判断 b 之 后 应 该 有 ;， 所 以 c; 被 处 理 为 一 个 独立 的 表达 式 语句 。 


又 比如 : 
var a = 42, b = "foo"; 
a 
b // "foo" 











上 述 代 码 同样 合法 ， 不 会 产生 错误 ， 因 为 ASI 也 适用 于 表达 式 语 句 。 








ASI 在 某 些 情况 下 很 有 用 ， 比 如 : 
var a = 42; 


do { 
/rats 

} while (a) // <-- 这 里 应 该 有 ; 

ay 








语法 规定 do. .while 循环 后 面 必须 带 ;， 而 while 和 for 循环 后 则 不 需要 。 大 多 数 开发 人 员 











都 不 记得 这 一 点 ， 此 时 ASI 就 会 自动 补 上 分 号 。 








本 章 前 面 讲 过 ， 语 名 代码 块 结尾 不 用 带 ; ， 所 以 不 需要 用 到 ASI; 














var a = 42; 
while (a) { 


//.. 
} // <-- 这 里 可 以 没有 ; 


al 


其 他 涉及 ASI 的 情况 是 break、continue、return 和 yteLd (ES6) 等 关键 


function foo(a) { 
if (!a) return 
a *= 2; 
AR 

} 





由 于 ASI 会 在 return 后 面 自动 加 上 ;， 所 以 这 里 return 语句 并 不 包括 第 二 














return 语句 的 跨度 可 以 是 多 行 ， 但 是 其 后 必须 有 换行 符 以 外 的 代码 : 





function foo(a) { 
return ( 
ax2+3/12 
); 
} 


上 述 规 则 对 break、continue 和 yield 也 同样 适用 。 


行 的 a *= 2。 





A 


112 | 第 5 章 


纠 错 机 制 
是 否 应 该 完全 依赖 ASI 来 编码 ， 这 是 JavaScript 社区 中 最 具 争 议 性 的 话题 之 一 ( 除 此 之 外 
还 有 Tab 和 空格 之 争 )。 





大 多 数 情况 下 ,分 号 并 非 必 不 可 少 ， 不 过 for( .. ) .… 循环 头 部 的 两 个 分 号 是 必需 的 。 
正方 认为 ASI 机 制 大 有 神 益 ， 能 省 略 掉 那 些 不 必要 的 ;， 让 代码 更 简洁 。 此 外 ，ASI 让 许 
多 ; 变 得 可 有 可 无 ， 因 此 只 要 代码 没 问 题 ， 有 没有 ; 都 一 样 。 
反方 则 认为 ASI 机 制 问题 太 多 ， 对 于 缺乏 经 验 的 初学 者 尤其 如 此 ， 因 为 自动 插入 ; 会 无 意 
中 改变 代码 的 逻辑 。 还 有 一 些 开发 人 员 认 为 省 略 分 号 本 身 就 是 错误 的 ， 应 该 通过 linter 这 
样 的 工具 来 找 出 这 些 错 误 ， 而 不 是 依赖 JavaScript 引擎 来 改正 错误 。 
































仔细 阅读 规范 就 会 发 现 ，ASI 实际 上 是 一 个 “ 纠 错 ”(error correction) 机 制 。 这 里 的 错误 
是 指 解析 器 错误 。 换 名 话说 ，ASI 的 目的 在 于 提高 解析 器 的 容错 性 。 


究竟 哪些 情况 需要 容错 呢 ? 我 认为 ， 解 析 器 报错 就 意味 着 代码 有 问题 。 对 ASI 来 说 ， 解 析 
器 报错 的 唯一 原因 就 是 代码 中 缺失 了 必要 的 分 号 。 


我 认为 在 代码 中 省 略 那些 “不 必要 的 分 号 ”就 意味 着 “这 些 代码 解析 颖 无 法 解析 ， 但 是 仍 
然 可 以 运行 ”。 





























仅仅 为 了 追求 “代码 的 美观 ”， 省 去 一 些 键盘 输入 ， 这 样 做 不 免 有 点 得 不 偿 失 。 


这 与 空格 和 Tab 之 争 还 不 是 一 回 事 ， 后 者 仅 涉 及 代码 的 美观 问题 ， 前 者 则 关系 到 原则 问 
题 : 是 遵循 语法 规则 来 编码 ， 还 是 打 规则 的 擦边球 。 


换个 角度 来 看 ， 依 赖 于 ASI 实际 上 是 将 换行 符 当 作 有 意义 的 “空格 ”来 对 待 。 在 一 些 语言 
(如 Python) 中 空格 是 有 意义 的 ， 但 这 对 JavaScript 是 否 适用 呢 ? 


我 建议 在 所 有 需要 的 地 方 加 上 分 号 ， 将 对 ASI 的 依赖 降 到 最 低 。 


以 上 观点 并 非 一 家 之 言 。JavaScript 的 作者 Brendan Eich 早 在 2012 年 就 说 过 这 样 的 话 
(http://brendaneich.com/2012/04/the-infernal-semicolon/) : 

















ASI 是 一 个 语法 纠 错 机 制 。 若 将 换行 符 当 作 有 意义 的 字符 来 对 待 ， 就 会 遇 到 很 多 
问题 。 多 希望 在 1995 年 5 月 的 那 十 天 里 (ECMAScript 规范 制定 期 间 )， 我 让 换 
行 符 承载 了 更 多 的 意义 。 但 切 勿 认为 ASI 真 的 会 将 换行 符 当 作 有 意义 的 字符 。 
| 
5.4 错误 


JavaScript 不 仅 有 各 种 类 型 的 运行 时 错误 (TypeError、ReferenceError、SyntaxError 等 )， 
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它 的 语法 中 也 定义 了 一 些 编译 时 错误 。 


在 编译 阶段 发 现 的 代码 错误 叫 作 “早期 错误 ”(early error)。 语 法 错误 是 早期 错误 的 一 种 
(如 a = ,)。 另 外 ， 语 法 正确 但 不 符合 语法 规则 的 情况 也 存在 。 





些 错误 在 代码 执行 之 前 是 无 法 用 try..catch 来 捕获 的 ， 相 反 ， 它 们 还 会 导致 解析 / 编译 


o 


小 


尝 








规范 没有 明确 规定 浏览 器 (和 开发 工具 ) 应 该 如 何 处 理 报错 ， 因 此 下 面 的 报 
错 处 理 (包括 错误 类 型 和 错误 信息 ) 在 不 同 的 浏览 器 中 可 能 会 有 所 不 同 。 











举 个 简单 的 例子 : 正则 表达 式 常 量 中 的 语法 。 这 里 JavaScript 语法 没有 问题 ， 但 非法 的 正 
则 表达 式 也 会 产生 早期 错误 : 


var a = /+foo/; // 错误 ! 





语法 规定 赋值 对 象 必 须 是 一 个 标识 符 (identifier, 或 者 ES6 中 的 解构 表达 式 ) ， 因 此 下 面 的 
42 会 报错 : 


var a; 
42 = a; // 错误 | 


ES5 规范 的 严格 模式 定义 了 很 多 早期 错误 。 比 如 在 严格 模式 中 ， 函 数 的 参数 不 能 重 名 : 
function foo(a,b,a) { } // 没 问题 
function bar(a,b,a) { "use strict"; } // 错误 ! 

再 如 ， 对 象 常量 不 能 包含 多 个 同名 属性 : 


(function(){ 
"use strict"; 


}; // 错误 ! 


从 语义 角度 来 说 ， 这 些 错误 并 非 词法 错误 ， 而 是 语法 错误 ， 因 为 它们 在 词 
法 上 是 正确 的 。 只 不 过 由 于 没有 GrammarError 类 型 ， 一些 浏览 器 选择 用 
SyntaxError 来 代替 。 








提前 使 用 变量 


ES6 规范 定义 了 一 个 新 概念 ， 叫 作 TDZ (Temporal Dead Zone， 和 暂时 性 死 区 ) 。 
TDZ 指 的 是 由 于 代码 中 的 变量 还 没有 初始 化 而 不 能 被 引用 的 情况 。 
对 此 ， 最 直观 的 例子 是 ES6 规范 中 的 let 块 作用 域 : 

{ 


a 2 // ReferenceError! 
let a; 








a = 2 试图 在 let a 初始 化 a 之 前 使 用 该 变量 
TDZ， 会 产生 错误 。 








一 、 


其 作用 域 在 { .. } 内 )， 这 里 就 是 a 的 











有 意思 的 是 ， 对 未 声明 变量 使 用 typeof 不 会 产生 错误 (参见 第 1 章 ), 但 在 TDZ 中 却 会 报错 : 


{ 
typeof a;  // undefined 
typeof b; // ReferenceError! (TDZ) 
let b; 

} 


5.5 ”函数 参数 
另 一 个 TDZ 违规 的 例子 是 ES6 中 的 参数 默认 值 (参见 本 系列 的 《你 不 知道 的 JavaScript 
(下 卷 )》 的 “ES6 & Beyond” 部 分 ) : 

var b = 3; 

function foo( a= 42,b=a+b+5){ 


//.. 
} 


b = a + b + 5 在 参数 b (= 右边 的 b， 而 不 是 函数 外 的 那个 ) 的 TDZ 中 访问 b， 所 以 会 出 
错 。 而 访问 a 却 没 有 问题 ， 因 为 此 时 刚好 跨 出 了 参数 a 的 TDZ。 


在 ES6 中 ， 如 果 参 数 被 省 略 或 者 值 为 undefined， 则 取 该 参数 的 默认 值 ; 


























function foo( a= 42, b=a+1)t 
console.log( a, b ); 


} 

foo(); // 42 43 
foo( undefined ); // 42 43 
foo( 5 ); // 56 
foo( void 0, 7 ); // 42 7 
foo( null ); // null 1 








表达 式 a + 1 中 nutt 被 强制 类 型 转换 为 90。 详情 请 参见 第 4 章 。 


对 ES6 中 的 参数 默认 值 而 言 ， 参 数 被 省 略 或 被 赋值 为 undefined 效果 都 一 样 ， 都 是 取 该 参 
数 的 默认 值 。 然 而 某 些 情况 下 ， 它 们 之 间 还 是 有 区 别 的 : 





function foo( a= 42, b=a+1)ft{ 
console. log( 
arguments.length, a, b, 
arguments[0]，arguments[1] 


); 


} 

foo(); // 0 42 43 undefined undefined 
foo( 10 ); // 1 10 11 10 undefined 

foo( 10, undefined ); // 2 10 11 10 undefined 

foo( 10, null ); // 2 10 null 10 null 


虽然 参数 a 和 b 都 有 默认 值 ， 但 是 函数 不 带 参 数 时 ，arguments 数组 为 空 。 

















相反 ， 如 果 向 函数 传递 undefined 值 ， 则 arguments 数组 中 会 出 现 一 个 值 为 undefined 的 单 

元 ， 而 不 是 默认 值 。 

ES6 参数 默认 值 会 导致 arguments 数组 和 相对 应 的 命名 参数 之 间 出 现 偏 差 ，ES5 也 会 出 现 
function foo(a) { 


a = 42; 
console.log( arguments[0] ); 


} 
foo( 2 ); // 42 (linked) 
foo(); // undefined (not linked) 


向 函数 传递 参数 时 ，arguments 数组 中 的 对 应 单元 会 和 命名 参数 建立 关联 (linkage) 以 得 
到 相同 的 值 。 相 反 ， 不 传递 参数 就 不 会 建立 关联 。 


但 是 ， 在 严格 模式 中 并 没有 建立 关联 这 一 说 : 








function foo(a) { 
"Use strict"; 
a = 42; 
console.log( arguments[0] ); 





} 

foo( 2 ); // 2 (not linked) 

foo(); // undefined (not linked) 
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因此 ， 在 开发 中 不 要 依赖 这 种 关联 机 制 。 实 际 上 ， 它 是 JavaScript 语言 引擎 底层 实现 的 一 
个 抽象 泄漏 (leaky abstraction) ， 并 不 是 语言 本 身 的 特性 。 


arguments 数组 已 经 被 废止 (特别 是 在 ES6 引入 剩余 参数 ... 之 后 ， 参 见 本 系列 的 《你 不 
知道 的 JavaScript (下 卷 )》 的 “ES6 & Beyond” 部 分 )， 不 过 它 并 非 一 无 是 处 。 


在 ES6 之前， 获得 函数 所 有 参数 的 唯一 途径 就 是 arguments 数组 。 此 外 ， 即 使 将 命名 参数 
和 arguments 数组 混用 也 不 会 出 错 ， 只 需 遵守 一 个 原则 ， 即 不 要 同时 访问 命名 参数 和 其 对 
应 的 arguments 数组 单元 。 

















function foo(a) { 
console.log( a + arguments[1] ); // 安全 ! 
} 


foo( 10, 32 ); // 42 


5.6 try..finally 


try..catch 对 我 们 来 说 可 能 已 经 非常 熟悉 了 。 但 你 是 否 知道 try 可 以 和 catch 或 者 finally 
配对 使 用 ， 并 且 必 要 时 两 者 可 同时 出 现 ? 


finally 中 的 代码 总 是 会 在 try 之 后 执行 ， 如 果 有 catch 的 话 则 在 catch 之 后 执行 。 也 可 以 
将 finally 中 的 代码 看 作 一 个 回调 函数 ， 即 无 论 出 现 什么 情况 最 后 一 定 会 被 调用 。 








如 果 try 中 有 return 语 名 会 出 现 什么 情况 呢 ? return 会 返回 一 个 值 ， 那 么 调用 该 函数 并 
得 到 返回 值 的 代码 是 在 finatly 之 前 还 是 之 后 执行 呢 ? 

















function foo() { 


try { 
return 42; 
} 
finally { 
console.log( "Hello" ); 
} 
console.log( "never runs" ); 
console.log( foo() ); 
// Hello 
// 42 


里 return 42 先 执行 ， 并 将 foo() 函数 的 返回 值 设置 为 42。 然 后 try 执行 完毕 ， 接 着 执 
finally。 最 后 foo() 国 数 执行 完毕 ，consote.1og(.…) 显示 返回 值 。 











pt [Ee 











try 中 的 throw 也 是 如 此 : 
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function foo() { 


try { 
throw 42; 
} 
finally { 
console.log( "Hello" ); 
} 


console.log( "never runs" ); 


} 


console.log( foo() ); 
// Hello 
// Uncaught Exception: 42 


如 果 finally 中 抛 出 异常 无论 是 有 意 还 是 无 意 )， 函 数 就 会 在 此 处 终止 。 如 果 此 前 try 中 
已 经 有 return 设置 了 返回 值 ， 则 该 值 会 被 丢弃 : 








function foo() { 


try { 
return 42; 
} 
finally { 
throw "Oops!"; 
} 


console.log( "never runs" ); 


} 


console.log( foo() ); 
// Uncaught Exception: Oops! 


continue 和 break 等 控制 语句 也 是 如 此 : 


for (var i=0; i<10; i++) { 


try { 
continuyue; 
} 
finally { 
console.log( i ); 
} 


} 
//0123456789 


continue 在 每 次 循环 之 后 ， 会 在 i++ 执行 之 前 执行 console.log(i)， 所 以 结果 是 9..9 而 非 
1. .10。 





ES6 中 新 加 入 了 yield 〈 参 见 本 书 的 “异步 和 性 能 ”部 分 )， 可 以 将 其 视 为 
return 的 中 间 版 本 。 然 而 与 return 不 同 的 是 ，yield 在 generator (ES6 的 另 
一 个 新 特性 ) 重新 开始 时 才 结 束 ， 这 意味 着 try { .. yield .. } 并 未 结束 ， 
因此 finally 不 会 在 yield 之 后 立即 执行 。 
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finally 中 的 return 会 履 盖 try 和 catch 中 return 的 返回 值 : 





function foo() { 





try { 
return 42; 
} 
finally { 
// 没有 返回 语句 ,所 以 没有 和 覆盖 
} 
} 
function bar() { 
try { 
return 42; 
} 
finally { 
// 覆盖 前 面 的 return 42 
return; 
3 
} 
function baz() { 
try { 
return 42; 
} 
finally { 
// 覆盖 前 面 的 return 42 
return "Hello"; 
} 


} 


foo(); // 42 
bar(); // undefined 
baz(); // Hello 


通常 来 说 ， 在 函数 中 省 略 return 的 结果 和 return; 及 return undefined; 是 一 样 的 ， 但 是 
在 finally 中 省 略 return 则 会 返回 前 面 的 return 设 定 的 返回 值 。 





























事实 上 ， 还 可 以 将 finally 和 带 标签 的 break 混合 使 用 (参见 5.1.3 布 )。 例 如 : 





function foo() { 


bar: { 
try { 
return 42; 
} 
finally { 
// 跳出 标签 为 bar 的 代码 块 
break bar ; 
} 
} 


console.log( "Crazy" ); 
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return "Hello"; 


} 


console.log( foo() ); 


// Crazy 
// Hello 


但 切 勿 这 样 操作 。 利 用 finally 加 带 标签 的 break 来 跳 过 return 只 会 让 代码 变 得 星座 难 
懂 ， 即 使 加 上 注释 也 是 如 此 。 

















5.7 switch 
现在 来 简单 介绍 一 下 switch， 可 以 把 它 看 作 if. .else if..else.. 的 简化 版 本 : 


switch (a) { 

Case 2: 
// 执行 一 些 代码 
break; 

Case 42: 
// 执行 男 外 一 些 代 码 
break; 

default: 


// 执行 缺 省 代码 














} 








这 里 3 与 case 表达 式 逐 一 进行 比较 。 如 果 匹 配 就 执行 该 case 中 的 代码 ， 直 到 break 或 者 
switch 代码 块 结 束 。 


这 看 似 并 无 特别 之 处 ， 但 其 中 存在 一 些 不 太 为 人 所 知 的 陷阱 。 

首先 ，a 和 case 表达 式 的 匹配 算法 与 === (参见 第 4 章 ) 相同 。 通 常 case 语句 中 的 switch 
都 是 简单 值 ， 所 以 这 并 没有 问题 。 

然而 ， 有 时 可 能 会 需要 通过 强制 类 型 转换 来 进行 相等 比较 ( 即 ==， 参 见 第 4 章 )， 这 时 就 
需要 做 一 些 特殊 处 理 : 

















var a = "42"; 


switch (true) { 

case a == 10: 
console.log( "10 or '10'" ); 
break; 

case a == 42; 
console.log( "42 or '42'" ); 
break; 

default: 
// 永远 执行 不 到 这 里 

















// 42 or '42" 
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除 简单 值 以 外 ，case 中 还 可 以 出 现 各 种 表达 式 ， 它 会 将 表达 式 的 结果 值 和 true 进行 比较 。 


因为 a == 42 的 结果 为 true， 所 以 条 件 成 立 。 


尽管 可 以 使 用 ==， 但 switch 中 true 和 true 之 间 仍 然 是 严格 相等 比 
式 的 结果 为 真 值 ， 但 不 是 严格 意义 上 的 true (参见 第 4 章 )， 则 条 们 


较 。 即 如 果 case 表达 








里 使 用 || 和 &8 等 逻辑 运算 符 就 很 容易 掉 进 坑 里 : 


var a = "hello world"; 
var b = 10; 


switch (true) { 
case (a || b == 10): 
// 永远 执行 不 到 这 里 
break; 
default: 
console.log( "Oops" ); 
} 
// Oops 


因为 (a 1| b == 19) 的 结果 是 "hello world" 而 非 true， 所 以 严格 术 
可 以 通过 强制 表达 式 返 回 true 或 false, 如 case !!(a || b == 10): 


F 不 成 立 。 所 以 ， 在 这 





目 等 比较 不 成 立 。 此 时 
(参见 第 4 章 )。 


最 后 ，default 是 可 选 的 ， 并 非 必 不 可 少 (虽然 惯例 如 此 )。break 相关 规则 对 defautt 仍 


然 适 用 : 
var a = 10; 


switch (a) { 
case 1: 
Case 2: 
// 永远 执行 不 到 这 里 
default: 
console.log( "default" ); 


Case 3: 
console.log( "3" ); 
break; 
case 4: 
console.log( "4" ); 
} 
// default 
// 3 


正如 之 前 介绍 的 ，case 中 的 break 也 可 以 带 标 





{Fo 


上 例 中 的 代码 是 这 样 执行 的 ， 首 先 遍历 并 找到 所 有 匹配 的 case， 

















如 果 没 有 匹配 则 执行 
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default 中 的 代码 。 因 为 其 中 没有 break， 所 以 继续 执行 已 经 遍历 过 的 case 3 代码 块 ， 直 
break 为 止 。 




















Me 


里 论 上 来 说 ， 这 种 情况 在 JavaScript 中 是 可 能 出 现 的 ， 但 在 实际 情况 中 ， 开 发 人 员 一 般 不 
会 这 样 来 编码 。 如 有 果 确 实 需要 这 样 做 ， 就 应 该 仔细 其 酌 并 做 好 注释 。 























5.8 小结 

JavaScript 语法 规则 中 的 许多 细节 需要 我 们 多 花 点 时 间 和 精力 来 了 解 。 从 长 远 来 看 ， 这 有 
助 于 更 深入 地 掌握 这 门 语言 。 

语句 和 表达 式 在 英语 中 都 能 找到 类 比 一 一 语句 就 像 英 语 中 的 句子 ， 而 表达 式 就 像 短 语 。 表 
达 式 可 以 是 简单 独立 的 ， 否 则 可 能 会 产生 副作用 。 








JavaScript 语法 规则 之 上 是 语义 规则 (也 称 作 上 下 文 )。 例 如 ，{ } 在 不 同情 况 下 的 意思 不 
尽 相 同 ， 可 以 是 语句 块 、 对 象 常量 、 解 构 赋 值 (ES6) 或 者 命名 函数 参数 (ES6)。 


JavaScript 详细 定义 了 运算 符 的 优先 级 (运算 符 执行 的 先后 顺序 ) 和 关联 (多 个 运算 符 的 
组 合 方式 )。 只 要 熟练 掌握 了 这 些 规则 ， 就 能 对 如 何 合 理 地 运用 它们 作出 自己 的 判断 。 


ASI (自动 分 号 插入 ) 是 JavaScript 引擎 的 代码 解析 纠 错 机 制 ， 它 会 在 需要 的 地 方 自动 插 
入 分 号 来 纠正 解析 错误 。 问 题 在 于 这 是 否 意 味 着 大 多 数 的 分 号 都 不 是 必要 的 〈 可 以 省 略 )， 
或 者 由 于 分 号 缺失 导致 的 错误 是 否 都 可 以 交 给 JavaScript 引擎 来 处 理 。 

















JavaScript 中 有 很 多 错误 类 型 ， 分 为 两 大 类 : 早期 错误 〈 编 译 时 错误 ， 无 法 被 捕获 ) 和 运 
行 时 错误 (可 以 通过 try..catch 来 捕获 )。 所 有 语法 错误 都 是 早期 错误 ， 程 序 有 语法 错误 
则 无 法 运行 。 





国 数 参数 和 命名 参数 之 间 的 关系 非常 微妙 。 尤 其 是 argunents 数组 ， 它 的 抽象 泄漏 给 我 们 
挖 了 不 少 坑 。 因 此 ， 尽 量 不 要 使 用 arguments， 如 果 非 用 不 可 ， 也 切 勿 同时 使 用 arguments 
和 其 对 应 的 命名 参数 。 

finally 中 代码 的 处 理 顺序 需要 特别 注意 。 它 们 有 时 能 派 上 很 大 用 场 ， 但 也 容易 引起 困惑 ， 
特别 是 在 和 带 标 签 的 代码 块 混用 时 。 总 之 ,使 用 finatly 旨 在 让 代码 更 加 简洁 易 读 ， 切 总 
弄巧成拙 。 

switch 相对 于 if..else if.. 来 说 更 为 简洁 。 需 要 注意 的 一 点 是 ， 如 果 对 其 理解 得 不 够 透 
彻 ， 稍 不 注意 就 很 容易 出 错 。 
































附录 A 
混合 环境 JavaScript 








除了 本 部 分 之 前 介绍 过 的 核心 的 语言 机 制 ，JavaScript 程序 在 实际 运行 中 可 能 还 会 出 现 一 
些 差异 。 如 果 JavaScript 程序 仅仅 是 在 引擎 中 运行 的 话 ， 它 会 严格 遵循 规范 并 且 是 可 以 预 
测 的 。 但 是 JavaScript 程序 几乎 总 是 在 宿主 环境 中 运行 ， 这 使 得 它 在 一 定 程度 上 变 得 不 可 
预测 。 








例如 ， 当 你 的 代码 和 其 他 第 三 方 代码 一 起 运行 ， 或 者 当 你 的 代码 在 不 同 的 JavaScript 引擎 
(并 非 仅仅 是 浏览 器 ) 上 运行 时 ， 有 些 地 方 就 会 出 现 差异 。 





下 面 将 就 此 进行 简单 的 介绍 。 





A.1 AnnexB (ECMAScript) 


JavaScript 语言 的 官方 名 称 是 ECMAScript 〈 指 的 是 管理 它 的 ECMA 标准 )， 这 一 点 不 太 为 
人 所 知 。 那 么 JavaScript 又 是 指 什么 呢 ? JavaScript 是 该 语言 的 通用 称谓 ， 更 确切 地 说 ， 它 
是 该 规范 在 浏览 器 上 的 实现 。 





官方 ECMAScript 规范 包括 Annex B， 甚 中 介绍 了 由 于 浏览 器 兼容 性 问题 导致 的 与 官方 规 
范 的 差异 。 

可 以 这 样 来 理解 : 这 些 差异 只 存在 于 浏览 器 中 。 如 末代 码 只 在 浏览 嚣 中 运行 ， 就 不 会 发 现 
任何 差异 。 否 则 (如果 代 码 也 在 Node.js、Rhino 等 环境 中 运行 )， 或 者 你 也 不 确定 的 时 候 ， 
就 需要 小 心 对 待 。 


下 面 是 主要 的 兼容 性 差异 。 
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。 在 非 严格 模式 中 允许 八进制 数值 常量 存在 ， 如 9123 ( 即 十 进 制 的 83)。 

。 window.escape(..) 和 window.unescape(..) 让 你 能 够 转 义 (escape) 和 回转 〈unescape) 

带 有 % 分 隔 符 的 十 六 进 制 字符 串 。 例 如 ，window.escape( "? foo=97%&bar=3%"” ) 的 结果 
为 "%3Ffoo%3D97%25%26bar%3D3%25"。 

。 String.prototype.substr 和 String.prototype.substring 十 分 相似 ， 除 了 前 者 的 第 二 个 
参数 是 结束 位 置 索 引 ( 非 自 包含 )， 后 者 的 第 二 个 参数 是 长 度 (需要 包含 的 字符 数 )。 
































Web ECMAScript 


Web ECMAScript 规范 (https://javascript.spec.whatwg.org) 中 介绍 了 官方 ECMAScript 规范 
和 目前 基于 浏览 器 的 JavaScript 实现 之 间 的 差异 。 


换 句 话说， 其 中 的 内 容 对 浏览 器 来 说 是 “必需 的 ”( 考 虑 到 兼容 性 ) ， 但 是 并 未 包含 在 官方 
规范 的 “Annex B” 部 分 (到 本 书写 作 时 ) 。 


。 <!-- 和 --> 是 合法 的 单行 注释 分 隔 符 。 

。 String.prototype 中 返回 HTML 格 式 字 符 串 的 附加 方法 : anchor(..)、big(..)、 
blink(..)、 bold(..)、 fixed(..)、 fontcolor(..)、 fontsize(..)、 italics(..).、 
link(..)、 small(..)、strike(..) 和 sub(..)。 

















以 上 内 容 在 实际 开发 中 很 少 使 用 ， 也 不 推荐 ， 我 们 更 倾向 于 使 用 其 他 的 内 建 
DOM API 和 自 定义 工具 集 。 














。 RegExp 扩展 : RegExp.$1 .. RegExp.$9 (匹配 组 ) 和 RegExp.LastMatch/RegExp["$&"] (最 
近 匹 配 ) 。 

。 Function.prototype 附加 方法 : Function.prototype.arguments (别名 为 arguments 对 象 ) 
和 Function.caLLer (别名 为 arguments.caLtLer ) 。 


arguments 和 arguments.caller 均 已 被 废止 ， 所 以 尽量 不 使 用 它们 ， 也 不 要 


使 用 它们 的 别名 。 


一 些 十 分 细微 且 很 不 常见 的 差异 这 里 就 不 介绍 了 。 如 有 需要 ， 可 参考 文档 
“Annex B” 和 “Web ECMAScript 。 
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通常 来 说 ， 出 现 这 些 差异 的 情况 很 少 ， 所 以 无 需 特别 担心 。 


意 即 可 。 


A.2 宿主 对 象 


JavaScript 中 有 关 变 量 的 规则 定 》 











主 对 象 ”( 包 括 内 建 对 象 和 函数 )。 


例如 : 


var a = document.createElement( "div" ); 


typeof a; 


Object.prototype.toString.call( a ); // 


dad.tagName; 


上 例 中 ,a 不 仅仅 是 一 
素 。 其 内 部 的 [[CLass]] 值 (为 "HTMLDivELement") 来 自 预定 义 的 属性 ( 通 





可 更 改 的 )。 


// "object"- -正如 所 料 
"[object HTMLDivELement]" 


// "DIV" 


个 object， 还 是 一 个 特殊 的 宿主 对 象 ， 














丹 为 它 











只 要 在 使 用 它们 的 时 候 特 别 注 


得 十 分 清楚 ， 但 也 不 乏 一 些 例外 情况 ， 比 如 自动 定义 的 


和 
变量 ， 以 及 由 宿主 环境 (浏览 器 等 ) 创建 并 提供 给 JavaScript 引擎 的 变量 一 一 所 谓 的 “ 宿 


是 一 个 DOM 元 


常 也 是 不 


另外 一 个 难点 在 4.2.3 节 中 的 “ 假 值 对 象 ”部 分 兽 介 绍 过 : 一 些 对 象 在 强制 转换 为 boolean 














时 ， 会 意外 地 成 为 假 值 而 非 真 值 ， 这 很 让 人 抓 狂 。 

















其 他 需要 注意 的 宿主 对 象 的 行为 差异 有 : 


。 无 法 写 覆 盖 ，; 


无 法 访问 正常 的 object 内 建 方 法 ， 如 toSstring(); 


。 包含 一 些 预定 义 的 只 读 属性 ， 
。 包含 无 法 将 this 重 载 为 其 他 对 象 的 方法 ， 


. 其 他 CE 





console 在 浏览 器 中 是 输 昌 

















在 我 们 经 常 打交道 的 宿主 对 象 中 ，consote 及 其 各 种 方法 (log(.…. 
值得 一 提 的 。consote 对 象 由 宿主 环境 提供 ， ee 。 








时 到 开发 工具 控制 台 ， 而 在 Node.js 和 其 他 服务 器 端 














在 针对 运行 环境 进行 编码 时 ， 宿 主 对 象 扮演 着 一 个 十 分 关键 的 角色 ， 但 要 特别 注意 其 行为 
特性 ， 因 为 它们 常常 有 别 于 普通 的 JavaScript object。 


JavaScript 环 


境 中 ， 则 是 指向 JavaScript 环境 系统 进程 的 标准 输出 (stdout) 和 标准 错误 输出 (stderr)。 





S 昌 人 
/ 比 口 
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A.3 全 局 DOM 变量 


你 可 能 已 经 知道 ， 声 明 一 个 全 局 变量 〈 使 用 var 或 者 不 使 用 ) 的 结果 并 不 仅仅 是 创建 一 个 
全 局 变量 ， 而 且 还 会 在 global 对 象 ( 在 浏览 器 中 为 window) 中 创建 一 个 同名 属性 。 


还 有 一 个 不 太 为 人 所 知 的 事实 是 : 由 于 浏览 器 演进 的 历史 遗留 问题 ， 在 创建 带 有 id 属性 
的 DOM 元 素 时 也 会 创建 同名 的 全 局 变量 。 例 如 









































<div id="foo"></div> 
以 及 : 

if (typeof foo == "undefined") { 

foo = 42; // 永远 也 不 会 运行 

} 

console.log( foo ); // HTML 元 素 
你 可 能 认为 只 有 JavaScript 代码 才能 创建 全 局 变量 ， 并 且 习 惯 使 用 typeof 或 .in window 
来 检测 全 局 变量 。 但 是 如 上 例 所 示 ，HTML 页 面 中 的 内 容 也 会 产生 全 局 变量 ， 并 且 稍 不 广 
意 就 很 容易 让 全 局 变量 检查 错误 百出 。 





























这 也 是 尽量 不 要 使 用 全 局 变量 的 一 个 原因 。 如 果 确 实 要 用 ， 也 要 确保 变量 名 的 唯一 性 ， 从 
而 避免 与 其 他 地 方 的 变量 产生 冲突 ， 包 括 HTML 和 其 他 第 三 方 代码 。 


A.4 原生 原型 
一 个 广为人知 的 JavaScript 的 最 佳 实践 是 : 不 要 扩展 原生 原型 。 


如 果 向 Array.prototype 中 加 入 新 的 方法 和 属性 ， 假 设 它们 确实 有 用 ， 设 计 和 命名 都 很 得 
当 ， 那 它 最 后 很 有 可 能 会 被 加 入 到 JavaScript 规范 当中 。 这 样 一 来 你 所 做 的 扩展 就 会 与 之 


冲突 。 









































我 自己 就 曾 遇 到 过 这 样 一 个 例子 。 


当时 我 正在 为 一 些 网 站 开发 一 个 戏 入 式 构件 ， 该 构件 基于 jQuery (基本 上 所 有 的 框架 都 
会 犯 这样 的 错误 ) 。 基 本 上 它 在 所 有 的 网 站 上 都 可 以 运行 ， 但 是 在 某 个 网 站 上 却 彻 底 无 法 


运行 。 











经 过 差不多 一 个 星期 的 分 析 调试 之 后 ， 我 发 现 这 个 网 站 有 一 段 遗留 代码 ， 如 下 : 


// Netscape 4 没有 Array.push 

Array.prototype.push = function(item) { 
this[this.length-1] = item; 

}; 
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除了 注释 以 外 ( 谁 还 会 关心 Netscape 4 呢 ?)， 上 述 代 码 似乎 没有 问题 ， 是 吧 ? 


问题 在 于 Array.prototype.push 随后 被 加 入 到 了 规范 中 ， 并 且 和 这 段 代 码 不 兼容 。 标 准 的 
push(..) 可 以 一 次 加 入 多 个 值 。 而 这 段 代 码 中 的 push 方法 则 只 会 处 理 第 一 个 值 。 




















几乎 所 有 JavaScript 框架 的 代码 都 使 用 push(..) 来 处 理 多 个 值 。 我 的 问题 则 是 CSS 选择 器 
引擎 (CSS selector)。 可 想 而 知 其 他 很 多 地 方 也 会 有 这 样 的 问题 。 

















最 初 编写 这 个 方法 的 开发 人 员 将 其 命名 为 push 没有 问题 ， 但 是 并 未 预见 到 需要 处 理 多 个 值 
的 情况 。 这 相当 于 挖 了 一 个 坑 ， 而 大 约 10 年 之 后 ， 我 无 意 间 掉 了 进去 。 




















从 中 我 们 可 以 吸取 几 个 教训 。 


首先 ， 不 要 扩展 原生 方法 ， 除 非 你 确信 代码 在 运行 环境 中 不 会 有 冲突 。 如 果 对 此 你 并 非 
100% 确定 ， 那 么 进行 扩展 是 非常 危险 的 。 这 需要 你 自己 仔细 权衡 利弊 。 


其 次 ， 在 扩展 原生 方法 时 需要 加 入 判断 条 件 〈 因 为 你 可 能 无 意 中 覆 盖 了 原来 的 方法 )。 对 
于 前 面 的 例子 ， 下 面 的 处 理 方式 要 更 好 一 些 : 




















if (!Array.prototype.push) { 
// Netscape 4 没有 Array.push 
Array.prototype.push = function(item) { 
this[this.length-1] = item; 
}; 
} 
其 中 ，if 语句 用 来 确保 当 JavaScript 运行 环境 中 没有 push() 方法 时 才 将 扩展 加 入 。 这 应 该 
可 以 解决 我 的 问题 。 但 它 并 非 万 全 之 策 ， 并 且 存 在 着 一 定 的 隐患 。 


如 果 网 站 代码 中 的 push(..) 原本 就 不 打算 处 理 多 个 值 的 情况 ， 那 么 标准 的 push(..) 出 台 
后 会 导致 代码 运行 出 错 。 


如 果 在 if 判断 前 引入 了 其 他 第 三 方 的 push(.…) 方法 ， 并 且 该 方法 的 功能 不 同 ， 也 会 导致 
代码 运行 出 错 。 




















这 里 突出 了 一 个 不 太 为 JavaScript 开发 人 员 广 意 的 问题 : 在 各 种 第 三 方 代码 混合 运行 的 环 
境 中 ， 是 否 应 该 只 使 用 现 有 的 原生 方法 ? 





答案 是 否定 的 ， 但 是 实际 上 不 太行 得 通 。 通 常 你 无 法 重新 定义 所 有 会 用 到 的 原生 方法 ， 同 
时 确保 它们 的 安全 。 即 使 可 以 ， 这 种 做 法 也 是 一 种 浪费 。 

那么 是 否 应 该 既 检 测 原生 方法 是 否 存在 ， 又 要 测试 它 能 否 执行 我 们 想 要 的 功能 ? 如 果 测 试 
没 通过 ， 是 不 是 意味 着 代码 要 停止 执行 ? 


// 不 要 信任 Array.prototype.push 
(function(){ 
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if (Array.prototype.push) { 
var a = []; 
a.push(1,2); 
if (a[0] === 1 && a[1] === 2) { 
// 测试 通过 ,可 以 放心 使 用 ! 
return; 


} 





} 


throw Error( 
"Array#push() is missing/broken!" 


) ; 
DO; 
里 论 上 说 这 个 方法 不 错 ， 但 实际 上 不 可 能 为 每 个 原生 函数 都 做 这 样 的 测试 。 

















YH 











那 应 该 怎么 办 呢 ? 我 们 是 否 应 该 逐一 做 测试 ?还 是 假设 一 切 没 问 题 ， 等 出 现 问 题 时 再 
处 理 ? 





这 里 没有 标准 答案 。 实 际 上 ， 只 要 我 们 自己 不 去 扩展 原生 原型 ， 就 不 会 遇 到 这 类 问题 。 





如 果 你 和 第 三 方 代码 都 遵循 以 上 原则 ， 那 么 你 的 程序 是 安全 的 。 否 则 就 要 更 加 谨慎 小 心地 
对 待 程序 ， 以 防 任 何 可 能 出 现 的 类 似 问 题 。 








针对 各 种 运行 环境 做 单元 和 回归 测试 能 够 早点 发 现 问 题 ， 却 不 能 够 完全 杜绝 问题 。 


shim/polyfill 

通常 来 说 ， 在 老 版 本 的 (不 符合 规范 的 ) 运行 环境 中 扩展 原生 方法 是 唯一 安全 的 ， 因 为 环 
境 不 太 可 能 发 生变 化 一 一 支持 新 规范 的 新 版 本 浏览 器 会 完全 替代 老 版 本 浏览 器 ， 而 非 在 老 
版 本 上 做 扩展 。 



































如 果 能 够 预见 哪些 方法 会 在 将 来 成 为 新 的 标准 ， 如 Array.prototype.foobar， 那 么 就 可 以 
完全 放心 地 使 用 当前 的 扩展 版 本 ， 不 是 吗 ? 





if (!Array.prototype.foobar) { 
// 幼稚 
Array.prototype.foobar = function() { 
this.push( "foo", "bar" ); 
}; 
} 
如 果 规 范 中 已 经 定义 了 Array.prototype.foobar， 并 且 甚 功能 和 上 面 的 代码 类 似 ， 那 就 没 
有 什么 问题 。 这 种 情况 一 般 称 为 polyfill (或 者 shim ) 。 


polyfill 能 有 效 地 为 不 符合 最 新 规范 的 老 版 本 浏览 器 填补 缺失 的 功能 ， 让 你 能 够 通过 可 靠 的 
代码 来 支持 所 有 你 想 要 支持 的 运行 环境 。 
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ES5-Shim (https://github.com/es-shims/es5-shim) 是 一 个 完整 的 shim/polyfill 
集合 ， 能 够 为 你 的 项 目 提供 ES5 基本 规范 支持 。 同 样 ，ES6-Shim (https:// 
Bl com/es-shims/es6-shim) 提供 了 对 ES6 基本 规范 的 支持 。 虽 然 我 们 可 
以 通过 shim/polyfill 来 填补 新 的 API， 但 是 无 法 填补 新 的 语法 。 可 以 使 用 
Traceur (https://github.com/google/traceur-compiler/wiki/GettingStarted) 这 样 
的 工具 来 实现 新 旧 语法 之 间 的 转换 。 














对 于 将 来 可 能 成 为 标准 的 功能 ， 按 照 大 部 分 人 赞同 的 方式 来 预先 实现 能 和 将 来 的 标准 齐 
的 polyfill， 我 们 称 为 prollyfill (probably fll) 。 


Ht 
3 








真正 的 问题 在 于 一 些 标准 功能 无 法 被 完整 地 polyfill/prollyfill。 


JavaScript 社区 存在 这 样 的 争论 ， 即 是 否 可 以 对 一 个 功能 做 不 完整 的 polyfill (将 无 法 
polyfill 的 部 分 文档 化 ) ， 或 者 不 做 则 已 ， 要 做 就 要 达到 100% 符合 规范 。 


很 多 开发 人 员 可 以 接受 一 些 不 完整 的 polyfill (如 Object.create(..))， 因 为 缺失 的 部 分 也 
不 会 被 用 到 。 





一 些 人 认为 在 polyfill/shim 中 的 if 判断 里 需要 加 入 兼容 性 测试 ， 并 且 只 在 被 测试 的 功能 
存在 或 者 未 通过 测试 时 才 将 其 替换 。 这 也 是 区 别 shim (有 兼容 性 测试 ) 和 polyfll (检查 功 
能 是 否 存在 ) 的 方式 。 





对 此 并 没有 一 个 绝对 正确 的 答案 。 即 便 在 老 版 本 的 运行 环境 中 使 用 了 “安全 ”的 做 法 ， 对 
原生 功能 进行 扩展 也 无 法 做 到 100% 安全 。 依 赖 第 三 方 代码 中 的 原生 功能 也 是 如 此 ， 因 为 
这 些 功 能 有 可 能 被 扩展 了 。 








因此 ， 在 处 理 这 些 情 况 的 时 候 需要 格外 小 心 ， 要 编写 健壮 的 代码 ， 并 且 写 好 文档 。 








A.5 <script> 


绝 大 部 分 网 站 /Web 应 用 程序 的 代码 都 存放 在 多 个 文件 中 ， 通 常 可 以 在 网 页 中 使 用 
<scriopt src=..></script> 来 加 载 这 些 文件 ， 或 者 使 用 <script> .. </script> 来 包含 内 
联 代 码 (inline-code )。 





这 些 文件 和 内 联 代 码 是 相互 独立 的 JavaScript 程序 还 是 一 个 整体 呢 ? 
答案 (也 许 会 邻 人 惊讶 ) 是 它们 的 运行 方式 更 像 是 相互 独立 的 JavaScript 程序 ， 但 是 并 非 
总 是 


它们 共享 global 对 象 (在 浏览 器 中 则 是 window) ， 也 就 是 说 这 些 文件 中 的 代码 在 共享 的 命 
名 空 间 中 运行 ， 并 相互 交互 。 
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如 果 某 个 script 中 定义 了 函数 foo()， 后 面 的 script 代码 就 可 以 访问 并 调用 foo() ， 就 像 
foo() 在 其 内 部 被 声明 过 一 样 。 


但 是 全 局 变量 作用 域 的 提升 机 制 (hoisting， 参 见 《 你 不 知道 的 JavaScript (上 卷 )》 的 
“作用 域 和 闭 包 ”部 分 ) 在 这 些 边 界 中 不 适用 ， 因 此 无 论 是 <script> .. </script> 还 是 
<script src=..></script>， 下 面 的 代码 都 无 法 运行 〈 因 为 foo() 还 未 被 声明 ) 。 








<script>foo();</script> 


<script> 
function foo() { .. } 
</script> 





但 是 下 面 的 两 段 代码 则 没 问 题 : 











<script> 

foo(); 

function foo() { .. } 
</script> 


和 |: 


<script> 
function foo() { ..} 

</script> 

<script>foo();</script> 
如 果 script 中 的 代码 (无 论 是 内 联 代码 还 是 外 部 代码 ) 发 生 错 误 ， 它 会 像 独立 的 
JavaScript 程序 那样 停止 ， 但 是 后 续 的 script 中 的 代码 (仍然 共享 global) 依然 会 接着 运 
行 ， 不 会 受 影响 。 
你 可 以 使 用 代码 来 动态 创建 script， 将 其 加 入 到 页 面 的 DOM 中 ， 效 果 是 一 样 的 : 

var greeting = "Hello World"; 


var el = document.createELement( "script" ); 


el.text = "function foo(){ alert( greeting );\ 
} setTimeout( foo, 1000 );"; 


document.body.appendChild( el ); 


如 果 将 el.src 的 值 设置 为 一 个 文件 URL， 就 可 以 通过 <scrscript=. .></script> 
动态 加 载 外 部 文件 。 
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内 联 代码 和 外 部 文件 中 的 代码 之 间 有 一 个 区 别 ， 即 在 内 联 代码 中 不 可 以 出 现 </script> 字 
符 串 ， 一 旦 出 现 即 被 视 为 代码 块 结束 。 因 此 对 于 下 面 这 样 的 代码 需要 非常 小 心 : 
<script> 


var code = "<script>alert( ‘Hello World’” )</script>"; 
</script> 

















上 述 代 码 看 似 没什么 问题 ， 但 是 字符 串 常量 中 的 </script> 将 会 被 当 作 结束 标签 来 处 理 
因此 会 导致 错误 。 常 用 的 变通 方法 是 : 











"</sc" + "ript>"; 
另外 需要 注意 的 一 点 是 ， 我 们 是 根据 代码 文件 的 字符 集 属 性 (UTF-8、ISO-8859-8 等 ) 来 


解析 外 部 文件 中 的 代码 〈 或 者 默认 字符 集 )， 而 内 联 代码 则 使 用 其 所 在 页 面 文件 的 字符 集 
(或 者 默认 字符 集 )。 














内 联 代 码 的 script 标签 没有 charset 属性 。 


script 标签 的 一 个 已 废止 的 用 法 是 在 内 联 代码 中 包含 HTML 或 XHTML 格式 的 注释 ， 如 : 


<script> 

Ss 

alert( "Hello" ); 
//--> 


</script> 


<script> 
<!1--//--><![CDATA[//><!-- 
alert( "World" ); 
//--><!]]> 


</script> 
现在 我 们 已 经 不 需要 这 样 做 了 ， 所 以 不 要 再 继续 使 用 它们 。 
<!-- 和 --> (HTML 格式 的 注释 ) 在 JavaScript 中 被 定义 为 合法 的 单行 注释 


分 隔 符 (var x = 2; 是 另 一 行 合法 注释 ) ， 这 是 老 的 技术 导致 的 〈 详 见 A.1 
节 的 “Web ECMAScript” 部 分 )， 切 勿 再 使 用 它们 。 














A.6 保留 字 


ES5 规范 在 7.6.1 闻 中 定义 了 一 些 “ 保 留 字 ”， 我 们 不 能 将 它们 用 作 变 量 名 。 这 些 保留 字 有 
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四 类 :“ 关 键 字 ”“ 预 留 关键 字 ”"、null 常量 和 true/false 布尔 常量 。 





像 function 和 switch 都 是 关键 字 。 预 留 关键 字 包 括 enun 等 ， 它 们 中 很 多 已 经 在 ES6 中 被 
用 到 (如 class、extend 等 )。 另 外 还 有 一 些 在 严格 模式 中 使 用 的 保留 字 ， 如 interface。 


一 个 名 为 “art4theSould” 的 StackOverflow 用 户 将 这 些 保留 字 编 成 了 一 首 有 趣 的 小 诗 (http:// 
stackoverflow.com/questions/26255/reserved-keywords-in-javascript/12114140#12114140) : 


Let this long package float, 

Goto private class if short. 

While protected with debugger case, 
Continue volatile interface. 
Instanceof super synchronized throw, 


Extends final export throws. 


Try import double enum? 

-False, boolean, abstract function, 
Implements typeof transient break! 
Void static, default do, 

Switch int native new. 

Else, delete null public var 

In return for const, true, char 


.…Finally catch byte. 


这 首 诗 中 包含 了 ES3 中 的 保留 字 (byte、long 等 )， 它 们 在 ES5 中 已 经 不 再 


是 保留 字 。 





在 ES5 之 前 ， 保 留 字 也 不 能 用 来 作为 对 象 常 量 中 的 属性 名 称 或 者 键 值 ， 但 是 现在 已 经 没有 
这 个 限制 。 





mw 





例如 ， 下 面 的 情况 是 不 允许 的 : 


var import = "42"; 





但 是 下 面 的 情况 是 允许 的 : 











var obj = { import: "42" }; 
console.log( obj.import ); 


需要 注意 的 是 ， 在 一 些 版 本 较 老 的 浏览 器 中 (主要 是 于)， 这 些 规则 并 不 完全 适用 ， 有 了 时 
候 将 保留 字 作 为 对 象 属性 还 是 会 出 错 。 所 以 需要 在 所 有 要 支持 的 浏览 器 中 仔细 测试 。 
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A.7 ”实现 中 的 限制 


JavaScript 规范 对 于 函数 中 参数 的 个 数 ， 以 及 字符 串 常量 的 长 度 等 并 没有 限制 ,但 是 由 于 
JavaScript 引擎 实 现 各 异 ， 规 范 在 某 些 地 方 有 一 些 限制 。 


例如 : 


function addAll() { 
var sum = 0; 
for (var i=0; i < arguments.Length; i++) { 
sum += arguments[i]; 
} 


return sum; 


} 


var nums = []; 
for (var i=1; i < 100000; i++) { 
nums .push(i); 


} 


addAll( 2, 4, 6 ); /1/ 12 
addAll.apply( null, nums ); // 应 该 是 : 499950000 
在 一 些 JavaScript 引擎 中 你 会 得 到 正确 答案 499950000， 而 另外 一 些 引 擎 (如 Safari 6.x) 中 


| 会 产生 错误 “RangeError: Maximum call stack size exceeded”。 
下 面 列 出 一 些 已 知 的 限制 : 


。 字符 串 常 量 中 允许 的 最 大 字符 数 〈 并 非 只 是 针对 字符 串 值 ) ; 

。 可 以 作为 参数 传递 到 函数 中 的 数据 大 小 〈 也 称 为 栈 大 小 ， 以 字 节 为 单位 ) ; 
。 函数 声明 中 的 参数 个 数 ， 

。 未 经 优化 的 调用 栈 (例如 递归 ) 的 最 大 层 数 ， 即 函数 调用 链 的 最 大 长 度 ， 
。 JavaScript 程序 以 阻塞 方式 在 浏览 器 中 运行 的 最 长 时 间 ( 秒 ) ; 

。 变量 名 的 最 大 长 度 。 


我 们 不 会 经 常 磁 到 这 些 限制 ， 但 应 该 对 它们 有 所 了 解 ， 特 别 是 不 同 的 JavaScript 引 警 的 限 
制 各 异 。 





污 























A.8 小 结 


JavaScript 语言 本 身 有 一 个 统一 的 标准 ， 在 所 有 神 览 器 /引擎 中 的 实现 也 是 可 靠 的 。 这 是 
好 事 ! 


但 是 JavaScript 很 少 独立 运行 。 通 常 运行 环境 中 还 有 第 三 方 代码 ， 有 时 代码 甚至 会 运行 在 
浏览 器 之 外 的 引擎 /环境 中 。 


只 要 我 们 对 这 些 问 题 多 加 注意 ， 就 能 够 提高 代码 的 可 靠 性 和 健壮 性 。 
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第 二 部 分 


异步 和 性 能 




















多 年 以 来 ， 老 板 信 任 我 ， 让 我 负责 面试 。 如 果 我 们 在 寻找 一 个 具备 JavaScript 技能 的 雇员 ， 
我 的 第 一 个 问题 就 是 …… 好 吧 ， 甚 实 就 是 问 问 面 试 者 是 否 需要 上 厕所 或 者 喝 点 什么 ， 因 为 
舒适 很 重要 。 不 过 一 旦 面试 者 完成 了 这 个 液体 输入 或 输出 的 过 程 ， 我 就 要 开始 判断 他 是 否 
了 解 JavaScript， 还 是 只 了 解 jQuery。 









































不 是 说 jQuery 哪里 不 好 。jQuery 让 你 不 需要 真正 了 解 JavaScript 就 可 以 做 很 多 事情 ， 这 
是 功能 ， 而 不 是 bug。 但 是 ， 如 果 工 作 内 容 需 要 JavaScript 性 能 和 维护 方面 的 高 级 技能 ， 
那么 应 聘 的 人 就 应 了 解 如 何 把 像 jQuery 这 样 的 库 组 合 起 来 。 你 得 能 够 像 这些 库 一 样 驾 驭 
JavaScript 的 核心 。 












































如 果 要 整体 了 解 一 个 人 的 核心 JavaScript 技能 ， 我 最 感 兴趣 的 是 他 们 会 如 何 使 用 闲 包 (你 
已 经 读 过 这 一 系列 中 的 《你 不 知道 的 JavaScript (上 卷 )》 了 吧 ? ) 以 及 如 何 充分 利用 异步 ， 
这 一 点 把 我 们 引 向 了 这 本 书 。 





首先 第 一 道 菜 是 回调 ， 这 是 异步 编程 的 面包 和 黄油 (基础)。 当 然 ， 靠 面包 和 黄油 并 不 足 
以 完成 令 人 非常 满意 的 大 餐 ， 接 下 来 的 课程 就 是 美味 异常 的 Promise ! 




















如 果 还 不 了 解 Promise， 现 在 正 是 学 习 的 时 候 。Promise 现在 已 经 是 JavaScript 和 DOM 提 
供 异步 返回 值 的 正式 方法 。 所 有 未 来 的 异步 DOM API 都 会 使 用 它们 ， 而 且 很 多 已 经 这 么 
做 了 ， 所 以 做 好 准备 吧 ! 写作 本 文 的 时 候 ， 多 数 主流 浏览 器 中 已 经 发 布 了 Promise， 下 很 
快 也 会 提供 支持 。 享 用 Promise 之 后 ， 和 希望 你 的 胃 里 还 有 空间 留 给 下 一 道 美食 一 一 生成 器 。 



































没有 大 张 旗 鼓 的 宣传 ， 生 成 器 就 已 经 悄悄 进入 了 Chrome 和 Firefox 的 稳定 版 本 ， 这 是 因 
为 ， 坦 白地 说 ， 它 们 的 复杂 性 要 高 于 其 趣味 性 。 或 者 说 ， 在 看 到 它们 与 Promise 合作 之 前 ， 
我 一 直 都 是 这 么 认为 的 。 可 之 后 呢 ， 它 们 成 了 提高 可 读 性 和 可 维护 性 的 重要 工具 。 





























甜品 是 …… 咽 ， 我 不 想 破 坏 了 惊喜 ， 但 是 ， 准 备 好 展望 JavaScript 的 未 来 吧 ! 这 本 书 涵盖 
的 功能 会 让 你 对 并 发 和 异步 有 越 来 越 多 的 控制 。 
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好 吧 ， 我 不 再 妨碍 你 享用 这 本 书 了 一 一 让 精彩 继续 吧 ! 如 果 在 看 此 序 之 前 你 已 经 阅读 了 本 
书 的 部 分 内 容 ， 那 么 请 给 你 自己 加 10 个 异步 分 ! 这 10 分 是 你 应 得 的 。 





Jake Archibald (http://jakearchibald.com, @jaffathecake), 
Google Chrome 开发 大 使 
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第 1 章 


异步 : 现在 与 将 来 





使 用 像 JavaScript 这 样 的 语言 编程 时 ， 很 重要 但 常常 被 误解 的 一 点 是 ， 如 何 表达 和 控制 持 
续 一 段 时 间 的 程序 行为 。 

这 不 仅仅 是 指 从 for 循环 开始 到 结束 的 过 程 ， 当 然 这 也 需要 持续 一 段 时 间 〈 几 微 秒 或 几 之 
秒 ) 才能 完成 。 它 是 指 程序 的 一 部 分 现在 运行 ， 而 另 一 部 分 则 在 将 来 运行 一 一 现在 和 将 来 
之 间 有 段 间 险 ， 在 这 段 间 阶 中 ， 程 序 没 有 活跃 执行 。 








实际 上 ， 所 有 重要 的 程序 (特别 是 JavaScript 程序 ) 都 需要 通过 这 样 或 那样 的 方法 来 管理 
这 段 时 间 间 隙 ， 这 时 可 能 是 在 等 待 用 户 输入 、 从 数据 库 或 文件 系统 中 请 求 数据 、 通 过 网 络 
发 送 数据 并 等 待 响应 ， 或 者 是 在 以 固定 时 间 间 隔 执 行 重复 任务 (比如 动画 )。 在 诸如 此 类 
的 场景 中 ， 程 序 都 需要 管理 这 段 时 间 间 隙 的 状态 。 地 铁 门 上 不 也 总 是 贴 着 一 句 警示 语 一 一 
“小 心 空隙 ”( 指 地 铁 门 与 站 台 之 间 的 空 阶 )。 


事实 上 ， 程 序 中 现在 运行 的 部 分 和 将 来 运行 的 部 分 之 间 的 关系 就 是 异步 编程 的 核心 。 






































毫 无 疑问 ， 从 一 开始 ，JavaScript 就 涉及 异步 编程 。 但 是 ， 多 数 JavaScript 开发 者 从 来 没有 
认真 思考 过 自己 程序 中 的 异步 到 底 是 如 何 出 现 的 ， 以 及 其 为 什么 会 出 现 ， 也 没有 探索 过 处 
里 异步 的 其 他 方法 。 一 直 以 来 ， 低 调 的 回调 函数 就 算 足 够 好 的 方法 了 。 目 前 为 止 ， 还 有 很 
多 人 坚持 认为 回调 函数 完全 够 用 。 



































Ne 














但 是 ， 作 为 在 浏览 器 、 服 务 器 以 及 其 他 能 够 想到 的 任何 设备 上 运行 的 一 流 编 程 语 言 ， 
JavaScript 面临 的 需求 日 益 扩 大 。 为 了 满足 这 些 需求 ，JavaScript 的 规模 和 复杂 性 也 在 持续 
增长 ， 对 异步 的 管理 也 越 来 越 令 人 痛苦， 这 一 切 都 迫切 需要 更 强大 、 更 合理 的 异步 方法 。 
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目前 为 止 ， 所 有 这 些 讨论 看 起 来 都 还 比较 抽象 ， 不 过 我 向 你 保证 ， 随 着 本 书 内 容 的 推进 ， 
对 这 个 问题 的 讨论 会 越 来 越 完整 和 具体。 在 接 下 来 的 几 章 中 ， 我 们 会 探讨 各 种 新 出 现 的 
JavaScript 异步 编程 技术 。 








但 是 ， 在 此 之 前 ， 我 们 首先 需要 深入 理解 异步 的 概念 及 其 在 JavaScript 中 的 运作 模式 。 


1.1 分 块 的 程序 


可 以 把 JavaScript 程序 写 在 单个 js 文件 中 ， 但 是 这 个 程序 几乎 一 定 是 由 多 个 块 构 成 的 。 这 
些 块 中 只 有 一 个 是 现在 执行 ， 其 余 的 则 会 在 将 来 执行 。 最 常见 的 块 单位 是 函数 。 

大 多 数 JavaScript 新 手 程 序 员 都 会 遇 到 的 问题 是 : 程序 中 将 来 执行 的 部 分 并 不 一 定 在 现在 
运行 的 部 分 执行 完 之 后 就 立即 执行 。 换 句 话说， 现在 无 法 完成 的 任务 将 会 异步 完成 ， 因 此 
并 不 会 出 现 人 们 本 能 地 认为 会 出 现 的 或 希望 出 现 的 阻塞 行为 。 

考虑 : 


// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 国 数 
var data = ajax( "http://some.url.1" ); 

















console.log( data ); 
// 啊 哦 ! data 通 常 不 会 包含 Ajax 结果 








你 可 能 已 经 了 解 ， 标 准 Ajax 请 求 不 是 同步 完成 的 ， 这 意味 着 ajax(..) 函数 还 没有 返回 
任何 值 可 以 赋 给 变量 data。 如 果 ajax(.…) 能 够 阻塞 到 响应 返回 ， 那 么 data = ，… 赋值 就 
会 正确 工作 。 


但 我 们 并 不 是 这 么 使 用 Ajax 的 。 现 在 我 们 发 出 一 个 异步 Ajax 请 求 ， 然 后 在 将 来 才能 得 到 
返回 的 结果 。 

从 现在 到 将 来 的 “等 待 "， 最 简单 的 方法 (但 绝对 不 是 唯一 的 ， 其 至 也 不 是 最 好 的 ! ) 是 
使 用 一 个 通常 称 为 回调 函数 的 国 数 : 




















// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 国 数 
ajax( "http://some.url.1", function myCallbackFunction(data){ 

















console.log( data ); // 耶 ! 这 里 得 到 了 一 些 数据 | 





于 7 





可 能 你 已 经 听 说 过 ， 可 以 发 送 同 步 Ajax 请 求 。 尽 管 技术 上 说 是 这 样 ， 但 
是 ， 在 任何 情况 下 都 不 应 该 使 用 这 种 方式 ， 因 为 它 会 锁定 浏览 器 UI ( 按 
钮 、 菜 单 、 深 动 条 等 )， 并 阻塞 所 有 的 用 户 交 互 。 这 是 一 个 可 怕 的 想法 ,一 
定 要 避免 。 
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你 有 不 同 的 意见 ?我 知道 ， 但 为 了 避免 回调 函数 引起 的 混乱 并 不 足以 成 为 使 用 阻塞 式 同 步 
Ajax 的 理由 。 








举例 来 说 ， 考 虑 一 下 下 面 这 段 代码 : 











function now() { 
return 21; 

} 

function later() { 
answer = answer * 2; 


console.log( "Meaning of life:", answer ); 


} 
var answer = now(); 


setTimeout( later, 1000 ); // Meaning of life: 42 


这 个 程序 有 两 个 块 : 现在 执行 的 部 分 ， 以 及 将 来 执行 的 部 分 。 这 两 块 的 内 容 很 明显 ， 但 这 
里 我 们 还 是 要 明确 指出 来 。 


现在 : 





function now() { 

return 21; 
} 
function Later() { ..} 
var answer = now(); 
setTimeout( later, 1000 ); 


将 来 : 


answer = answer * 2; 
console.log( "Meaning of life:", answer ); 


现在 这 一 块 在 程序 运行 之 后 就 会 立即 执行 。 但 是 ，setTimeout(..) 还 设置 了 一 个 事件 ( 定 
时 ) 在 将 来 执行 ， 所 以 函数 later() 的 内 容 会 在 之 后 的 某 个 时 间 (从 现在 起 1000 毫秒 之 
后 ) 执行 。 

任何 时 候 ， 只 要 把 一 段 代 码 包 装 成 一 个 函数 ， 并 指定 它 在 响应 某 个 事件 (定时 器 、 鼠 标点 
击 、Ajax 响应 等 ) 时 执行 ， 你 就 是 在 代码 中 创建 了 一 个 将 来 执行 的 块 ， 也 由 此 在 这 个 程序 
中 引入 了 异步 机 制 。 


异步 控制 台 


并 没有 什么 规范 或 一 组 需求 指定 console.* 方法 族 如 何 工 作 一 一 它们 并 不 是 JavaScript 正式 






































A 


140 | 第 1 章 


的 一 部 分 ， 而 是 由 宿主 环境 (请 参考 本 书 的 “类 型 和 语法 ”部 分 ) 添加 到 JavaScript 中 的 。 
因此 ， 不 同 的 浏览 器 和 JavaScript 环境 可 以 按照 自己 的 意愿 来 实现 ， 有 时候 这 会 引起 混淆 。 














尤其 要 提出 的 是 ， 在 某 些 条 件 下 ， 某 些 浏览 器 的 console.1log(..) 并 不 会 把 传人 的 内 容 立 
即 输出 。 出 现 这 种 情况 的 主要 原因 是 ， 在 许多 程序 (不 只 是 JavaScript) 中 ，IO 是 非常 低 
速 的 阻塞 部 分 。 所 以 ，( 从 页 面 /UI 的 角度 来 说 ) 浏览 器 在 后 台 异 步 处 理 控制 台 IO 能 够 提 
高 性 能 ， 这 时 用 户 甚至 可 能 根本 意识 不 到 其 发 生 。 


下 面 这 种 情景 不 是 很 常见 ， 但 也 可 能 发 生 ， 从 中 〈 不 是 从 代码 本 身 而 是 从 外 部 ) 可 以 观察 
到 这 种 情况 
































var a={ 
index: 1 


3 


// 然后 
console.log( a ); // 3?? 


// 再 然后 

a.index++; 
我 们 通常 认为 恰好 在 执行 到 console.1log(..) 语句 的 时 候 会 看 到 a 对 象 的 快照 ， 打 印 出 类 
似 于 { index: 1 } 这样 的 内 容 ， 然 后 在 下 一 条 语句 a.index++ 执行 时 将 其 修改 ， 这 名 的 执 
行 会 严格 在 a 的 输出 之 后 。 


多 数 情况 下 ， 前 述 代 码 在 开发 者 工具 的 控制 台中 输出 的 对 象 表示 与 期 望 是 一 致 的 。 但 是 ， 
这 段 代码 运行 的 时 候 ， 浏 览 器 可 能 会 认为 需要 把 控制 台 VO 延迟 到 后 台 ， 在 这 种 情况 下 ， 
等 到 浏 览 器 控制 台 输 出 对 象 内 容 时 ，a.index++ 可 能 已 经 执行 ， 因 此 会 显示 { index: 2 }。 














到 底 什么 时 候 控 制 台 IO 会 延迟 ， 甚 至 是 否 能 够 被 观察 到 ， 这 都 是 游 移 不 定 的 。 如 果 在 调 
试 的 过 程 中 遇 到 对 象 在 console.1log(..) 语句 之 后 被 修改 ， 可 你 却 看 到 了 意料 之 外 的 结果 ， 
要 意识 到 这 可 能 是 这 种 IO 的 异步 化 造成 的 。 








如 果 遇 到 这 种 少见 的 情况 ， 最 好 的 选择 是 在 JavaScript 调试 器 中 使 用 断 点 ， 
而 不 要 依赖 控制 台 输 出 。 次 优 的 方案 是 把 对 象 序列 化 到 一 个 字符 串 中 ， 以 强 
制 执 行 一 次 “快照 >， 比如 通过 JSON. stringify(..)。 











1.2 事件 循环 


现在 我 们 来 浴 清 一 件 事情 (可 能 令 人 震惊 ) : 尽管 你 显然 能 够 编写 异步 JavaScript 代码 
(就 像 前 面 我 们 看 到 的 定时 代码 )， 但 直到 最 近 ES6) ，JavaScript 才 真正 内 建 有 直接 的 异 
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什么 ? ! 这 种 说 法 似乎 很 疯狂 ， 对 不 对 ? 但 事实 就 是 这 样 。JavaScript 引擎 本 身 所 做 的 只 
不 过 是 在 需要 的 时 候 ， 在 给 定 的 任意 时 刻 执行 程序 中 的 单个 代码 块 。 


“需要 ”， 谁 的 需要 ? 这 正 是 关键 所 在 ! 














JavaScript 引擎 并 不 是 独立 运行 的 ， 它 运行 在 宿主 环境 中 ， 对 多 数 开发 者 来 说 通常 就 是 
Web 浏览 器 。 经 过 最 近 几 年 (不仅 于 此 ) 的 发 展 ，JavaScript 已 经 超出 了 浏览 器 的 范围 ， 
进入 了 其 他 环境 ， 比 如 通过 像 Node.js 这 样 的 工具 进入 服务 器 领域 。 实 际 上 ，JavaScript 现 
如 今 已 经 府 入 到 了 从 机 器 人 到 电灯 泡 等 各 种 各 样 的 设备 中 。 


但 是 ， 所 有 这 些 环境 都 有 一 个 共同 “点 ” (thread， 也 指 线程 。 不 论 真 假 与 否 ， 这 都 不 算 一 
个 很 精妙 的 异步 笑话 )， 即 它们 都 提供 了 一 种 机 制 来 处 理 程序 中 多 个 块 的 执行 ， 且 执行 每 
块 时 调用 JavaScript 引擎 ， 这 种 机 制 被 称 为 事件 符 环 。 


换 句 话说 ，JavaScript 引擎 本 身 并 没有 时 间 的 概念 ， 只 是 一 个 按 需 执行 JavaScript 任意 代码 
片段 的 环境 。 “事件 ”(JavaScript 代码 执行 ) 调度 总 是 由 包含 它 的 环境 进行 。 


所 以 ， 举 例 来 说 ， 如 有 果 你 的 JavaScript 程序 发 出 一 个 Ajax 请 求 ， 从 服务 器 获取 一 些 数据 ， 
那 你 就 在 一 个 函数 (通常 称 为 回调 函数 ) 中 设置 好 响应 代码 ， 然 后 JavaScript 引擎 会 通知 
宿主 环境 :“ 嘿 ,现在 我 要 暂停 执行 ， 你 一 旦 完成 网 络 请 求 ， 拿 到 了 数据 ， 就 请 调用 这 个 
然后 浏览 器 就 会 设置 侦 听 来 自 网 络 的 响应 ， 拿 到 要 给 你 的 数据 之 后 ， 就 会 把 回调 函数 插入 
到 事件 循环 ， 以 此 实现 对 这 个 回调 的 调度 执行 。 

那么 ， 什 么 是 事件 循环 ? 


先 通过 一 段 伪 代 码 了 解 一 下 这 个 概念 : 







































































// eventLoop 是 一 个 用 作 队 列 的 数组 
A/ (先进 ; 先 由 ) 

var eventLoop = [ ]; 

var event; 


//“ 永 远 " 执 行 
while (true) { 
// 一 次 tick 
if (eventLoop.length > 0) { 
// 拿 到 队列 中 的 下 一 个 事件 


event = eventLoop.shift(); 


// 现在 ,执行 下 一 个 事件 








catch (err) { 
reportError(err); 
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过 


的 


你 


} 
} 
} 


当然 是 一 段 极度 简化 的 伪 代 码 ， 只 用 来 说 明 概念 。 不 过 它 应 该 足以 用 来 帮助 大 家 有 更 好 


理解 。 


可 以 看 到 ， 有 一 个 用 while 循环 实现 的 持续 运行 的 循环 ， 循 环 的 每 一 轮 称 为 一 个 tick。 

















对 每 个 tick 而 言 ， 如 果 在 队列 中 有 等 竺 事件， 那么 就 会 从 队列 中 摘 下 一 个 事件 并 执行 。 这 
些 事件 就 是 你 的 回调 函数 。 








定 要 清楚 ，setTimeout(..) 并 没有 把 你 的 回调 函数 挂 在 事件 循环 队列 中 。 它 所 做 的 是 设 








定 一 个 定时 器 。 当 定时 器 到 时 后 ， 环 境 会 把 你 的 回调 函数 放 在 事件 循环 中 ， 这 样 ， 在 未 来 
某 个 时 刻 的 tick 会 摘 下 并 执行 这 个 回调 。 


如 
其 


























有 果 这 时 候 事件 循环 中 已 经 有 20 个 项 目 了 会 怎样 呢 ? 你 的 回调 就 会 等 待 。 它 得 排 在 
他 项 目 后 面 一 一 通常 没有 抢占 式 的 方式 支持 直接 将 其 排 到 队 首 。 这 也 解释 了 为 什么 








setTimeout(..) 定时 器 的 精度 可 能 不 高 。 大 体 说 来 ， 只 能 确保 你 的 回调 函数 不 会 在 指定 的 


时 
状 


所 





间 间 隔 之 前 运行 ， 但 可 能 会 在 那个 时 刻 运行 ， 也 可 能 在 那 之 后 运行 ， 要 根据 事件 队列 的 
态 而 定 。 


以 换 句 话说 就 是 ， 程 序 通常 分 成 了 很 多 小 块 ， 在 事件 循环 队列 中 一 个 接 一 个 地 执行 。 严 

















格 地 说 ， 和 你 的 程序 不 直接 相关 的 其 他 事件 也 可 能 会 插入 到 队列 中 。 


1 














前 面 提 到 的 “直到 最 近 ” 是 指 ES6 从 本 质 上 改变 了 在 哪里 管理 事件 循环 。 本 
来 它 儿 乎 已 经 是 一 种 正式 的 技术 模型 了 ,但 现在 ES6 精确 指定 了 事件 循环 
的 工作 细节 ， 这 意味 着 在 技术 上 将 其 纳入 了 JavaScript 引擎 的 势力 范围 ， 而 
不 是 只 由 宿主 环境 来 管理 。 这 个 改变 的 一 个 主要 原因 是 ES6 中 Promise 的 引 
入 ， 因 为 这 项 技术 要 求 对 事件 循环 队列 的 调度 运行 能 够 直接 进行 精细 控制 
(参见 1.4.3 节 中 对 setTimeout(. .90) 的 讨论 )， 具 体内 容 会 在 第 3 章 中 介绍 。 









































.3 ”并 行 线程 





术语 “异步 ”和 “并 行 ” 常 常 被 混为一谈 ， 但 实际 上 它们 的 意义 完全 不 同 。 记 住 ， 异 步 是 
关于 现在 和 将 来 的 时 间 间 险 ， 而 并 行 是 关于 能 够 同时 发 生 的 事情 。 











并 行 计算 最 常见 的 工具 就 是 进程 和 线程 。 进 程 和 线程 独立 运行 ， 并 可 能 同时 和 运行: 在 不 同 


的 
与 


处 理 器 ， 其 至 不 同 的 计算 机 上 ， 但 多 个 线程 能 够 共享 单个 进程 的 内 存 。 
之 相对 的 是 ， 事 件 循 环 把 自身 的 工作 分 成 一 个 个 任务 并 顺序 执行 ， 不 允许 对 共享 内 存 的 


并 行 访 问 和 修改 。 通 过 分 立 线 程 中 彼此 合作 的 事件 循环 ， 并 行 和 顺序 执行 可 以 共存 。 
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并 行 线程 的 交替 执行 和 异步 事件 的 交替 调度 ， 甚 粒度 是 完全 不 同 的 。 
举例 来 说 : 








function later() { 
answer = answer * 2; 
console.log( "Meaning of life:", answer ); 


} 
尽管 later() 的 所 有 内 容 被 看 作 单 独 的 一 个 事件 循环 队列 表 项 ， 但 如 果 考 虑 到 这 有 段 代码 是 运 
行 在 一 个 线程 中 ， 实 际 上 可 能 有 很 多 个 不 同 的 底层 运算 。 比 如 ，answer = answer * 2 需要 
先 加 载 answer 的 当前 值 ， 然 后 把 2 放 到 某 处 并 执行 乘法 ， 取 得 结果 之 后 保存 回 answer 中 。 
在 单线 程 环境 中 ， 线 程 队 列 中 的 这 些 项 目 是 底层 运算 确实 是 无 所 谓 的 ， 因 为 线程 本 身 不 会 
被 中 断 。 但 如 果 是 在 并 行 系统 中 ， 同 一 个 程序 中 可 能 有 两 个 不 同 的 线程 在 运转 ， 这 时 很 可 
能 就 会 得 到 不 确定 的 结果 。 


考虑 : 


























var a = 20; 


function foo() { 
a=a+l; 


3 


function bar() { 
a = 2 


} 


// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 函 数 
ajax( "http://some.url.1", foo ); 
ajax( "http://some.url.2", bar ); 



































根据 JavaScript 的 单线 程 运行 特性 ， 如 果 foo() 运行 在 bar() 之 前 ，a 的 结果 是 42， 而 如 果 
bar() 运行 在 foo() 之 前 的 话 ，a 的 结果 就 是 41。 





如 果 共 享 同一 数据 的 JavaScript 事件 并 行 执行 的 话 ， 那 么 问题 就 变 得 更 加 微妙 了 。 考 虑 
foo() 和 bar() 中 代码 运行 的 线程 分 别 执行 的 是 以 下 两 段 伪 代 码 任务 ， 然 后 思考 一 下 如 果 
它们 恰好 同时 运行 的 话 会 出 现 什么 情况 。 


线程 1 (X 和 Y 是 临时 内 存 地 址 ) : 


foo() : 
a. 把 a 的 值 加 载 到 X 
b. 把 1 保存 在 Y 
c. 执行 X 加 Y ,结果 保存 在 X 
d. 把 x 的 值 保存 在 a 


线程 2 (X 和 YY 是 临时 内 存 地 址 ) : 





























144 | 第 1 章 


bar(): 
a， 把 a 的 值 加 载 到 Xx 
b. 把 2 保存 在 Y 
c. 执行 X 乘 Y, 结 果 保存 在 X 
d. 把 X 的 值 保 存在 a 


现在 ， 假 设 两 个 线程 并 行 执行 。 你 可 能 已 经 发 现 了 这 个 程序 的 问题 ， 是 吧 ? 它们 在 临时 步 
又 中 使 用 了 共享 的 内 存 地 址 X 和 Y。 


如 有 果 按 照 以 下 步骤 执行 ， 最 终结 果 将 会 是 什么 样 呢 ? 


1a (把 a 的 值 加 载 到 X ==> 20) 
2a (把 a 的 值 加 载 到 X ==> 20) 
1b (把 1 保存 在 Y ==> 1) 
2b (把 2 保存 在 Y ==> 2) 



































1c (执行 Xx 加 Y, 结 果 保 存在 X ==> 22) 

1d (把 x 的 值 保存 在 a ==> 22) 

2c 《执行 X 乘 Y, 结 果 保存 在 X ==> 44) 
2d 《〈 把 X 的 值 保存 在 a ==> 44) 





a 的 结果 将 是 44。 但 如 果 按 照 以 下 顺序 执行 呢 ? 


1a (把 a 的 值 加 载 到 Xx ==> 20) 
2a 《把 a 的 值 加 载 到 X ==> 20) 
2b (把 2 保存 在 Y ==> 2) 
1b (把 1 保存 在 Y ==> 1) 











2c (执行 X 乘 Y, 结 果 保 存在 X ==> 20) 
1c 〈 执 行 X 加 Y ,结果 保存 在 X ==> 21) 
1d (把 x 的 值 保存 在 a ==> 21) 
2d 《把 x 的 值 保 存在 a ==> 21) 
a 的 结果 将 是 21。 


所 以 ， 多 线程 编程 是 非常 复杂 的 。 因 为 如 果 不 通过 特殊 的 步骤 来 防止 这 种 中 断 和 交错 运行 
的 话 ， 可 能 会 得 到 出 乎 意料 的 、 不 确定 的 行为 ， 通 常 这 很 让 人 头疼 。 





JavaScript 从 不 跨 线 程 共享 数据 ， 这 意味 着 不 需要 考虑 这 一 层次 的 不 确定 性 。 但 是 这 并 不 
意味 着 JavaScript 总 是 确定 性 的 。 回 忆 一 下 前 面 提 到 的 ，foo() 和 bar() 的 相对 顺序 改变 可 
能 会 导致 不 同 结 果 (41 或 42)。 























可 能 目前 还 不 是 很 明显 ， 但 并 不 是 所 有 的 不 确定 性 都 是 有 害 的 。 这 有 时 无 关 
紧要 ， 但 有 时 又 是 要 刻意 追求 的 结果 。 关 于 这 一 点 ， 本 章 和 后 面 几 章 会 给 出 
更 多 示例 。 











完整 运行 
由 于 JavaScript 的 单线 程 特性 ，foo() (以 及 bar()) 中 的 代码 具有 原子 性 。 也 就 是 说 ， 一 
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且 foo() 开始 运行 ， 它 的 所 有 代码 都 会 在 bar() 中 的 任意 代码 运行 之 前 完成 ， 或 者 相反 。 


这 称 为 完整 运行 (run-to-completion) 特性 。 





实际 上 ， 如 果 foo() 和 bar() 中 的 代码 更 长 ， 完 整 运 行 的 语义 就 会 更 加 清晰 ， 比 如 : 


at+; 
D's bs: 
a=b+3; 

} 

function bar() { 
b--; 
a=8+b; 
b= a 2 


了? 











// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 函数 
ajax( "http://some.url.1", foo ); 
ajax( "http://some.url.2", bar ); 








由 于 foo() 不 会 被 bar() 中 断 ，bar() 也 不 会 被 foo() 中 断 ， 所 以 这 个 程序 只 有 两 个 可 能 的 
输出 ， 取 决 于 这 两 个 函数 哪个 先 运 行 一 一 如 果 存 在 多 线程 ， 且 foo() 和 bar() 中 的 语句 可 











以 交替 运行 的 话 ， 可 能 输出 的 数目 将 会 增加 不 少 ! 


块 1 是 同步 的 〈 现 在 运行 )， 而 块 2 和 块 3 是 异步 的 〈 将 来 运行 )， 


在 时 间 上 是 分 隔 的 。 


块 1: 


也 就 是 说 ， 它 们 的 运行 





输出 1: 


b--; 


a; // 183 
b; // 180 





同一 段 代 码 有 两 个 可 能 输出 意味 着 还 是 存在 不 确定 性 | 


een 而 不 是 多 线程 情况 下 的 语句 顺序 级 别 


换 名 话说 ， 这 一 确定 性 要 高 于 多 线程 情况 





但 是 ， 这 种 不 确定 性 是 在 函数 〈 事 
(或 者 说 ， 表 达 式 运算 顺序 级 别 ) 。 


在 JavaScript 的 特性 中 ， 这 种 函数 顺序 的 不 确定 性 就 是 通常 所 说 的 竞 态 条 件 (race 


condition) ，foo() 和 bar() 相互 竞争 ， 看 谁 先 运行 。 具 体 来 说 ， 因 为 无 法 可 靠 预 测 a 和 1， 


的 最 终结 果 ， 所 以 才 是 竞 态 条 件 。 


如 果 JavaScript 中 的 某 个 函数 由 于 某 种 原 














大 








不 具有 完整 运行 特性 ， 那 么 可 能 


的 结果 就 会 多 得 多 ， 对 吧 ? 实际 上 ，ES6 就 引入 了 这 么 一 个 东西 (参见 第 4 


章 ) ， 现 在 还 不 必 为 此 操心 ， 以 后 还 会 再 探讨 这 一 部 分 ! 
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1.4 并 发 


现在 让 我 们 来 设想 一 个 展示 状态 更 新 列表 〈 比 如 社交 网 络 新 闻 种 子 ) 的 网 站 ， 其 随 着 用 户 
向 下 滚动 列表 而 逐渐 加 载 更 多 内 容 。 要 正确 地 实现 这 一 特性 ， 需 要 (至少) 两 个 独立 的 
“进程 ”同时 运行 (也 就 是 说 ， 是 在 同一 段 时 间 内 ， 并 不 需要 在 同一 时 刻 )。 





这 里 的 “进程 ”之 所 以 打上 引号 ， 是 因为 这 并 不 是 计算 机 科学 意义 上 的 真正 
操作 系统 级 进程 。 这 是 虚拟 进程 ， 或 者 任务 ， 表示 一 个 逻辑 上 相关 的 运算 序 
列 。 之 所 以 使 用 “进程 ”而 不 是 “任务 ”， 是 因为 从 概念 上 来 讲 ,，“ 进 程 ” 的 
定义 更 符合 这 里 我 们 使 用 的 意义 。 




















第 一 个 “进程 ”在 用 户 向 下 滚动 页 面 触发 onscroll 事件 时 响应 这 些 事 件 (发 起 Ajax 请 求 
要 求 新 的 内 容 )。 第 二 个 “进程 ”接收 Ajax 响应 (把 内 容 展示 到 页 面 )。 


显然 ， 如 果 用 户 滚动 页 面 足够 快 的 话 ， 在 等 待 第 一 个 响应 返回 并 处 理 的 时 候 可 能 会 看 到 两 
个 或 更 多 onscroll 事件 被 触发 ， 因 此 将 得 到 快速 触发 彼此 交替 的 onscroll 事件 和 Ajax 响 
应 事件 。 


两 个 或 多 个 “进程 ”同时 执行 就 出 现 了 并 发 ， 不 管 组 成 它们 的 单个 运算 是 否 并 行 执行 (在 
独立 的 处 理 器 或 处 理 器 核心 上 同时 运行 )。 可 以 把 并 发 看 作 “ 进 程 ”级 (或 者 任务 级 ) 的 
并 行 ， 与 运算 级 的 并 行 (不同 处 理 器 上 的 线程 》 相 对 。 





















































并 发 也 引出 了 这 些 “ 进 程 ” 之 间 可 能 的 彼此 交互 的 概念 。 我 们 会 在 后 面 
介绍 。 














在 给 定 的 时 间 窗 口内 (用 户 滚动 页 面 的 儿 秒 钟 内 )， 我 们 看 看 把 各 个 独立 的 “进程 ”表示 
为 一 系列 事件 /运算 是 什么 样 的 : 


“进程 ”1 (onscroll 事件 ) : 


onscroLL， 请 求 1 
onscroLL， 请 求 2 
onscroll， 请求 3 
onscroll， 请求 4 
onscroll， 请求 5 
onscroLL， 请 求 6 
onscroLL， 请 求 7 


“进程 ”2 (Ajax 响应 事件 ) : 








1 
2 
3 
4 
四 
四 
四 














hy5 
M6 
应 7 





i 

















~ 





hl 


事件 的 时 间 线 是 这 样 的 : 


onscroLL， 请 求 1 
onscroLL， 请 求 2 
onscroLL， 请 求 3 
响应 3 
onscroLL， 请 求 4 
onscroLL， 请 求 5 
onscroLL， 请 求 6 
onscroLL， 请 求 7 











啊 应 6 
hy5 
啊 应 7 





三 











但 是 ， 本 章 前 面 介绍 过 事件 循环 的 概念 ，JavaScript 








一 
五 


Py1 
应 2 











3 
五 


响应 4 


民 可 能 某 个 onscrott 事件 和 某 个 Ajax 响应 事件 恰好 同时 可 以 处 理 。 举 例 来 说 ， 假 设 这 些 




















次 只 能 处 理 一 个 事件 ， 所 以 要 么 是 








onscroll， 请 求 2 先 发 生 ， 要 么 是 响应 1 先 发 生 ,但 是 不 会 严格 地 同时 发 生 。 这 就 像 学 校 
食堂 的 孩子 们 ， 不 管 在 门 外 多 么 拥挤 ， 最 终 他 们 都 得 站 成 一 队 才能 拿 到 自己 的 午饭 ! 





元 














onscroLL， 请 求 1 <--- 
onscroLL， 请 求 2 

啊 应 1 <--- 
onscroLL， 请 求 3 

上 吧 应 2 
啊 应 3 
onscroLL， 请 求 4 
onscroLL， 请 求 5 
onscroLL， 请 求 6 






































“进程 ”1 和 “进程 ”2 并 发 运行 
中 依次 运行 的 。 





啊 应 4 
onscroLL， 请 求 7 <--- 进 
啊 应 6 
啊 应 5 
响应 7 2 





下 面 列 出 了 事件 循环 队列 中 所 有 这 些 交 替 的 事件 : 


进程 1 启动 
进程 2 启动 








(任务 级 并 行 )， 但 是 它们 的 各 个 事件 是 在 事件 循环 队列 








另外 ， 注 意 到 响应 6 和 响应 5 的 返回 是 乱 序 的 了 吗 ? 





单线 程 事 件 循环 是 并 发 的 一 种 形式 〈 当 然 还 有 其 他 形式 ， 后 面 会 介绍 ) 。 
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1.4.1 非 交 互 

两 个 或 多 个 “进程 ”在 同一 个 程序 内 并 发 地 交替 运行 它们 的 步骤 /事件 时 ， 如 果 这 些 任务 
彼此 不 相关 ， 就 不 一 定 需 要 交互 。 如 果 进 程 间 没有 相互 影响 的 话 ， 不 确定 性 是 完全 可 以 接 
受 的 。 


举例 来 说 : 

















var res = {}; 


function foo(results) { 
res.foo = results; 


} 


function bar(results) { 
res.bar = results; 


} 


// ajax(..) 是 某 个 库 提供 的 某 个 Ajax 函 数 

ajax( "http://some.url.1", foo ); 

ajax( "http://some.url.2", bar ); 
foo() 和 bar() 是 两 个 并 发 执行 的 “进程 ”， 按 照 什么 顺序 执行 是 不 确定 的 。 但 是 ， 我 们 构 
建 程序 的 方式 使 得 无 论 按 哪 种 顺序 执行 都 无 所 谓 ， 因 为 它们 是 独立 运行 的 ， 不 会 相互 影 
啊 。 


这 并 不 是 竞 态 条 件 pug， 因 为 不 管 顺 序 如 何 ， 代 码 总 会 正常 工作 。 











1.4.2 ”交互 
更 常见 的 情况 是 ， 并 发 的 “进程 ”需要 相互 交流 ， 通 过 作用 域 或 DOM 间接 交互 。 正 如 前 
下 介绍 的 ， 如 果 出 现 这 样 的 交互 ， 就 需要 对 它们 的 交互 进行 协调 以 避免 苋 态 的 出 现 。 



































下 面 是 一 个 简单 的 例子 ， 两 个 并 发 的 “进程 ”通过 隐 含 的 顺序 相互 影响 ， 这 个 顺序 有 时 会 
被 破坏 : 











var res = []; 


function response(data) { 
res.push( data ); 


} 
// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 函 数 


ajax( "http://some.url.1", response ); 
ajax( "http://some.url.2", response ); 

















这 里 的 并 发 “进程 ”是 这 两 个 用 来 处 理 Ajax 响应 的 response() 调用 。 它 们 可 能 以 任意 顺 
序 运 行 。 








我 们 假定 期 望 的 行为 是 res[9] 中 放 调 用 "http://some.urtl.1" 的 结果 ，res[1] 中 放 调 用 
"http://some.url.2" 的 结果 。 有 时 候 可 能 是 这 样 ， 但 有 时 候 却 恰好 相反 ， 这 要 视 哪个 调 
用 先 完成 而 定 。 


这 种 不 确定 性 很 有 可 能 就 是 一 个 竞 态 条 件 bug。 

















在 这 些 情况 下 ， 你 对 可 能 做 出 的 假定 要 持 十 分 谨慎 的 态度 。 比 如 ， 开 发 者 可 
能 会 观察 到 对 "http://some.url.2" 的 响应 速度 总 是 显著 慢 于 对 "http:// 
some.url.1" 的 响应 ， 这 可 能 是 由 它们 所 执行 任务 的 性 质 决定 的 (比如 , 一 
个 执行 数据 库 任务 ， 而 另 一 个 只 是 获取 静态 文件 )， 所 以 观察 到 的 顺序 总 是 
符合 预期 。 即 使 两 个 请 求 都 发 送 到 同一 个 服务 器 ， 也 总 会 按照 固定 的 顺序 响 
应 ， 但 对 于 响应 返回 浏览 器 的 顺序 ， 也 没有 人 可 以 真正 保证 。 





















































所 以 ， 可 以 协调 交互 顺序 来 处 理 这 样 的 竞 态 条 件 : 








var res = []; 


function response(data) { 
if (data.url == "http://some.url.1") { 
res[0] = data; 


} 

else if (data.url == "http://some.url.2") { 
res[1] = data; 

} 


) 
// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 函 数 


ajax( "http://some.url.1", response ); 
ajax( "http://some.url.2", response ); 





不 管 哪 一 个 Ajax 响应 先 返 回 ， 我 们 都 要 通过 查看 data.url (当然 ,假定 从 服务 器 总 会 返 
回 一 个 ! ) 判断 应 该 把 响应 数据 放 在 res 数组 中 的 什么 位 置 上 。res[9] 总 是 包含 "http:// 
some.url.1" 的 结果 ，res[1] 总 是 包含 "http://some.url.2" 的 结果 。 通 过 简单 的 协调 ， 就 
避免 了 竞 态 条 件 引 起 的 不 确定 性 。 

















从 这 个 场景 推出 的 方法 也 可 以 应 用 于 多 个 并 发 函数 调用 通过 共享 DOM 彼此 之 间 交 互 的 
情况 ， 比 如 一 个 函数 调用 更 新 某 个 <div> 的 内 容 ， 另 外 一 个 更 新 这 个 <div> 的 风格 或 属性 
(比如 使 这 个 DOM 元 素 一 有 内 容 就 显示 出 来 )。 可 能 你 并 不 想 在 这 个 DOM 元 素 在 拿 到 内 
容 之 前 显示 出 来 ， 所 以 这 种 协调 必须 要 保证 正确 的 交互 顺序 。 


有 些 并 发 场景 如 果 不 做 协调 ， 就 总 是 (并非 偶尔 ) 会 出 错 。 考 虑 : 





























var a, b; 


function foo(x) { 
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3 WA 2 


baz(); 

} 

function bar(y) { 
b=y*2; 
baz(); 


} 


function baz() { 
console.log(a + 


} 


b); 


// ajax(..) 是 某 个 库 中 的 某 个 Ajax 函 数 





ajax( "http://some.u 
ajax( "http://some.u 


Ell F006 ) 
rl.2", bar ); 


在 这 个 例子 中 ， 无 论 foo() 和 bar() 哪 一 个 先 被 触发 ， 总 会 使 baz() 过 早 运行 (a 或 者 b 仍 处 
于 未 定义 状态 ) ; 但 对 baz() 的 第 二 次 调用 就 没有 问题 ， 因 为 这 时 候 a 和 b 都 已 经 可 用 了 。 


要 解决 这 个 问题 有 多 种 方法 。 这 里 给 出 了 一 种 简单 方法 : 


var a, b; 


function foo(x) { 


a=X* 2 
if (a && b) { 
baz() ; 
} 
3 
function bar(y) { 
b=y*2; 
if (a && b) { 
baz(); 
} 


} 


function baz() { 
console.log( a + 


3 


// ajax(..) 是 某 个 库 
ajax( "http://some.u 
ajax( "http://some.u 




















b ); 


的 某 个 Ajax 函数 
FL 602) 
rL.2"，bar ); 


包 囊 baz() 调用 的 条 件 判断 if (a && b) 传统 上 称 为 门 (gate)， 我 们 虽然 不 能 确定 a 和 b 
到 达 的 顺序 ， 但 是 会 等 到 它们 两 个 都 准备 好 再 进一步 打开 门 (调用 baz())。 


另 一 种 可 能 遇 到 的 并 发 交互 条 件 有 时 称 为 竞 态 (race) ， 但 是 更 精确 的 叫 法 是 门 站 (latch)。 
它 的 特性 可 以 描述 为 “只 有 第 一 名 取胜 ”。 在 这 里 ， 不 确定 性 是 可 以 接受 的 ， 因 为 它 明确 
指出 了 这 一 点 是 可 以 接受 的 : 需要 “竞争 ”到 终点 ， 且 只 有 唯一 的 胜利 者 。 
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请 思考 下 面 这 段 有 问题 的 代码 : 











var ai 


function foo(x) { 
a X25 
baz(); 


function bar(x) { 
SX 2: 
baz(); 


function baz() { 
console.log( a ); 


} 


// ajax(..) 是 某 个 库 中 的 某 个 Ajax 函 数 
ajax( "http://some.url.1", foo ); 
ajax( "http://some.url.2", bar ); 





不 管 哪 一 个 〈foo() 或 bar()) 后 被 触发 ， 都 不 仅 会 覆盖 另外 一 个 给 a 赋 的 值 ， 也 会 重复 调 
用 baz() (很 可 能 并 不 是 想 要 的 结果 )。 





所 以 ， 可 以 通过 一 个 简单 的 门 门 协调 这 个 交互 过 程 ， 只 让 第 一 个 通过 : 
var ai 


function foo(x) { 


if (!a) { 
a=X* 2; 
baz(); 
} 
} 
function bar(x) { 
if (!1a) { 
-i 
baz(); 
} 


} 


function baz() { 
console.log( a ); 


} 


// ajax(..) 是 某 个 库 中 的 某 个 Ajax 函 数 
ajax( "http://some.url.1", foo ); 
ajax( "http://some.url.2", bar ); 





条 件 判 断 if 〈!a) 使 得 只 有 foo() 和 bar() 中 的 第 一 个 可 以 通过 ， 第 二 个 (实际 上 是 任何 
后 续 的 ) 调用 会 被 忽略 。 也 就 是 说 ， 第 二 名 没有 任何 意义 1 
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出 于 简化 演示 的 目的 ， 在 所 有 这 些 场 景 中 ， 我 们 一 直 都 使 用 了 全 局 变量 ， 但 
这 对 于 此 处 的 论证 完全 不 是 必需 的 。 只 要 相关 的 函数 〈 通 过 作用 域 ) 能 够 访 
问 到 这 些 变量 ， 就 会 按照 预期 工作 。 依 赖 于 词法 作用 域 变量 (参见 本 系列 的 
《你 不 知道 的 JavaScript (上 卷 )》 的 “作用 域 和 闲 包 ”部 分 ) ， 实 际 上 前 面 例 
子 中 那样 的 全 局 变量 ， 对 于 这 些 类 别 的 并 发 协调 是 一 个 明显 的 负面 因素 。 随 
着 后 面 儿童 内 容 的 展开 ,我 们 会 看 到 还 有 其 他 种 类 的 更 清晰 的 协调 方式 。 








1.4.3 协作 

还 有 一 种 并 发 合作 方式 ， 称 为 并 发 协作 (cooperative concurrency)。 这 里 的 重点 不 再 是 通过 
共享 作用 域 中 的 值 进行 交互 (尽管 显然 这 也 是 允许 的 ! )。 这 里 的 目标 是 取 到 一 个 长 期 运 
行 的 “进程 ”， 并 将 其 分 割 成 多 个 步骤 或 多 批 任务 ， 使 得 其 他 并 发 “进程 ”有 机 会 将 自己 
的 运算 插入 到 事件 循环 队列 中 交替 运行 。 


举例 来 说 ， 考 虑 一 个 需要 遍历 很 长 的 结果 列表 进行 值 转换 的 Ajax 响应 处 理 函 数 。 我 们 会 
使 用 Array#map(..) 让 代码 更 简洁 : 











var res = []; 


// response(..) 从 Ajax 调用 中 取得 结果 数组 
function response(data) { 
// 添加 到 已 有 的 res 数 组 
res = res.concat( 
// 创建 一 个 新 的 变换 数组 把 所 有 data 值 加 倍 
data.map( function(val){ 
return val * 2; 


于 








9 
} 


// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 函 数 
ajax( "http://some.url.1", response ); 
ajax( "http://some.url.2", response ); 

















如 果 "http://some.url.1" 首先 取得 结果 ， 那 么 整个 列表 会 立刻 映射 到 res 中 。 如 果 记 录 
有 几 千 条 或 更 少 ， 这 不 算 什么 。 但 是 如 果 有 像 1000 万 条 记录 的 话 ， 就 可 能 需要 运行 相当 
一 段 时 间 了 (在 高 性 能 笔记 本 上 需要 儿 秒 钟 ， 在 移动 设备 上 需要 更 长 时 间 ， 等 等 )。 


这 样 的 “进程 ”运行 时 ， 页 面 上 的 其 他 代码 都 不 能 运行 ， 包 括 不 能 有 其 他 的 response(..) 
调用 或 UI 刷新 ， 甚 至 是 像 滚动 、 输 入 、 按 钮 点 击 这 样 的 用 户 事件 。 这 是 相当 痛苦 的 。 
所 以 ， 要 创建 一 个 协作 性 更 强 更 友好 且 不 会 霸占 事件 循环 队列 的 并 发 系统 ， 你 可 以 异步 地 
批 处 理 这 些 结果 。 每 次 处 理 之 后 返回 事件 循环 ， 让 其 他 等 待 事件 有 机 会 运行 。 


















































这 里 给 出 一 种 非常 简单 的 方法 : 
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我 们 把 数据 集合 放 在 最 多 包含 1000 条 项 目的 块 中 。 这 样 ， 我 们 就 确保 了 “进程 


var res = []; 


// response(..) 从 Ajax 调用 中 取得 结果 数组 
function response(data) { 

// 一 次 处 理 1060 个 

var chunk = data.splice( 0, 1000 ); 





// 添加 到 已 有 的 res 组 


res = res.concat( 


// 创建 一 个 新 的 数组 把 chunk 中 所 有 值 加 倍 
chunk.map( function(val){ 
return val * 2; 


站 





类 


// 还 有 剩 下 的 需要 处 理 吗 ? 
if (data.Length > 0) { 


} 
} 





// 异步 调度 下 一 次 批 处 理 
setTimeout( function(){ 
response( data ); 


} 0 


// ajax(..) 是 某 个 库 中 提供 的 某 个 Ajax 函 数 


ajax( 
ajax( 





"http://some.url.1", response ); 
"http://some.url.2", response ); 


间 会 很 短 ， 即 使 这 意味 着 需要 更 多 的 后 续 “ 进 程 ”， 
站 点 /App 的 响应 (性 能 )。 


JU 























”运行 时 
因为 事件 循环 队列 的 交替 运行 会 提高 


然 ， 我们 并 没有 协调 这 些 “ 进 程 ”的 顺序 ， 所 以 结果 的 顺序 是 不 可 预测 的 。 如 果 需 要 排 
序 的 话 ， 就 要 使 用 和 前 面 提 到 类 似 的 交互 技术 ,或 者 本 书后 面 章 市 将 要 介绍 的 技术 。 








这 里 使 用 setTimeout(..9) (hack) 进行 异步 调度 ， 基 本 上 它 的 意思 就 是 “把 这 个 函数 插入 
当前 事 们 


到 











循环 队列 的 结尾 处 ”。 














严格 说 来 ，setTimeout(..0) 并 不 直接 把 项 目 插入 到 事件 循环 队列 。 定 时 器 
会 在 有 机 会 的 时 候 插入 事件 。 举 例 来 说 ， 两 个 连续 的 setTimeout(. .0) 调用 
不 能 保证 会 严格 按照 调用 顺序 处 理 ， 所 以 各 种 情况 都 有 可 能 出 现 ， 比 如 定时 
器 漂移 ， 在 这 种 情况 下 ， 这 些 事件 的 顺序 就 不 可 预测 。 在 Node.js 中 ， 类 似 














的 方法 是 process.nextTick(..)。 尽 管 它们 使 用 方便 (通常 性 能 也 更 高 )， 
但 并 没有 (至 少 到 目前 为 止 ) 直接 的 方法 可 以 适应 所 有 环境 来 确保 异步 事件 








的 顺序 。 下 一 小 节 我 们 会 深入 讨论 这 个 话题 。 
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1.5 任务 


在 ES6 中 ， 有 一 个 新 的 概念 建立 在 事件 循环 队列 之 上 ， 叫 作 任 务 队列 (job queue)。 这 个 
概念 给 大 家 带 来 的 最 大 影响 可 能 是 Promise 的 异步 特性 (参见 第 3 章 )。 


遗憾 的 是 ， 目 前 为 止 ， 这 是 一 个 没有 公开 API 的 机 制 ， 因 此 要 展示 清楚 有 些 困 难 。 所 以 我 
们 目前 只 从 概念 上 进行 描述 ， 等 到 第 3 章 讨 论 Promise 的 异步 特性 时 ， 你 就 会 理解 这 些 动 
作 是 如 何 协调 和 处 理 的 。 


因此 ， 我 认为 对 于 任务 队列 最 好 的 理解 方式 就 是 ， 它 是 挂 在 事件 循环 队列 的 每 个 tick 之 后 
的 一 个 队列 。 在 事件 循环 的 每 个 tick 中 ， 可 能 出 现 的 异步 动作 不 会 导致 一 个 完整 的 新 事件 
添加 到 事件 循环 队列 中 ， 而 会 在 当前 tick 的 任务 队列 末尾 添加 一 个 项 目 (一 个 任务 )。 


这 就 像 是 在 说 :“ 哦 ， 这 里 还 有 一 件 事 将 来 要 做 ,但 要 确保 在 其 他 任何 事情 发 生 之 前 就 完 
事件 循环 队列 类 似 于 一 个 游乐 园 游戏 : 玩 过 了 一 个 游戏 之 后 ， 你 需要 重新 到 队 尾 排队 才能 
再 玩 一 次 。 而 任务 队列 类 似 于 玩 过 了 游戏 之 后 ， 插 队 接 着 继续 玩 。 


一 个 任务 可 能 引起 更 多 任务 被 添加 到 同一 个 队列 末尾 。 所 以 ， 理 论 上 说 ， 任 务 循环 (job 
loop) 可 能 无 限 循环 〈 一 个 任务 总 是 添加 另 一 个 任务 ， 以 此 类 推 )， 进 而 导致 程序 的 
饿 死 ， 无 法 转移 到 下 一 个 事件 循环 tck。 从 概念 上 看 ， 这 和 代码 中 的 无 限 循环 《就 像 
while(true)..) 的 体验 几乎 是 一 样 的 。 


任务 和 setTimeout(. .9) hack 的 思路 类 似 ， 但 是 其 实现 方式 的 定义 更 加 良好 ， 对 顺序 的 保 
证 性 更 强 : 尽 可 能 早 的 将 来 。 


设想 一 个 调度 任务 (直接 地 ， 不 要 hack) 的 API， 称 其 为 schedule(..)。 考 虑 : 
















































































console.log( "A" ); 


setTimeout( function(){ 
console.log( "B" ); 


二 人 


// 理论 上 的 "任务 API" 
scheduLe( function(){ 
console.log( "C" ); 





scheduLe( function(){ 
console.log( "D" ); 
} ); 
}); 


可 能 你 认为 这 里 会 打印 出 A B 5 D, 但 实际 打印 的 结果 是 A C D B。 因 为 任务 处 理 是 在 当前 
事件 循环 tick 结尾 处 ， 且 定时 器 触发 是 为 了 调度 下 一 个 事件 循环 tick (如 果 可 用 的 话 ! )。 
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在 第 3 章 中 ， 我 们 将 会 看 到 ，Promise 的 异步 特性 是 基于 任务 的 ， 所 以 一 定 要 清楚 它 和 事 
件 循环 特性 的 关系 。 


1.6 语句 顺序 


代码 中 语句 的 顺序 和 JavaScript 引擎 执行 语句 的 顺序 并 不 一 定 要 一 致 。 这 个 陈述 可 能 看 起 
来 似乎 会 很 奇怪 ， 所 以 我 们 要 简单 解释 一 下 。 


但 在 此 之 前 ， 以 下 这 一 点 我 们 应 该 完全 清楚 : 这 门 语言 的 规则 和 语法 (参见 本 系列 的 《你 
不 知道 的 JavaScript (上 卷 )》 的 “作用 域 和 闭 包 ”部 分 ) 已 经 从 程序 的 角度 在 语序 方面 
规定 了 可 预测 和 非常 可 靠 的 特性 。 所 以 ， 接 下 来 我 们 要 讨论 的 内 容 你 应 该 无 法 在 自己 的 
JavaScript 程序 中 观察 到 。 











如 果 你 观察 到 了 类 似 于 我 们 将 要 展示 的 编译 器 对 语句 的 重 排序 ， 那 么 这 很 明 
显 违反 了 规范 ， 而 这 一 定 是 由 所 使 用 的 JavaScript 引擎 中 的 bug 引起 的 一 一 
该 bug 应 该 被 报告 和 修正 ! 但 是 更 可 能 的 情况 是 ， 当 你 怀疑 JavaScript 引擎 
做 了 什么 疯狂 的 事情 时 ， 实 际 上 却 是 你 自己 代码 中 的 bug (可 能 是 竞 态 条 件 ) 
引起 的 。 所 以 首先 要 检查 自己 的 代码 ， 并 且 要 反复 检查 。 通 过 使 用 断 点 和 单 
步 执行 一 行 一 行 地 遍历 代码 ，JavaScript 调试 器 就 是 用 来 发 现 这 样 bug 的 最 









































强大 工具 。 
考虑 : 
var a, b 
a = 10; 
b = 30; 
a=a+1; 
b=b+1; 


console.log( a + b ); // 42 





这 段 代 码 中 没有 显 式 的 异步 除了 前 面 介绍 过 的 很 少见 的 异步 WO ! )， 所 以 很 可 能 它 的 执 
行 过 程 是 从 上 到 下 一 行 行进 行 的 。 











但 是 ，JavaScript 引擎 在 编译 这 段 代码 之 后 (是 的 ，JavaScript 是 需要 编译 的 ， 参 见 本 系列 
的 《你 不 知道 的 JavaScript (上 卷 )》 的 “作用 域 和 闭 包 ”部 分 ! ) 可 能 会 发 现 通过 (安全 
地 ) 重新 安排 这 些 语句 的 顺序 有 可 能 提高 执行 速度 。 重 点 是 ， 只 要 这 个 重新 排序 是 不 可 见 
的 , 一切 都 没 问 题 。 


比如 ， 引 擎 可 能 会 发 现 ， 其 实 这 样 执行 会 更 快 : 
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var a，b; 


a -= 103 
a++; 


b = 30; 
b++; 


console.log( a + b ); // 42 





console.log( a + b ); // 42 





或 者 甚至 这 样 : 


// 因为 a 和 b 不 会 被 再 次 使 用 
// 我 们 可 以 inLine, 从 而 完全 不 需要 它们 ! 
console.log( 42 ); // 42 




















前 
都 是 一 样 的 。 

但 是 这 里 有 一 种 场景 ， 其 中 特定 的 优化 是 不 安全 的 ， 
其 实 也 根本 不 能 称 为 优化 ) : 


"| 


























var a, b; 
a = 10; 
b = 30; 


// 我 们 需要 a 和 b 处 于 递增 之 前 的 状态 ! 
console.log( ax b ); // 300 


a 
b 


console.log( a + b ); // 42 


看 的 所 有 情况 中 ，JavaScript 引擎 在 编译 期 间 执行 的 都 是 安全 的 优化 ， 最 后 可 见 的 结果 

















因此 也 是 不 允许 的 (当然 ， 不 用 说 这 





还 有 其 他 一 些 例子 ， 其 中 编译 器 重新 排序 会 产生 可 见 的 副作用 (因此 必须 禁止 )， 比 如 会 
产生 副作用 的 函数 调用 (特别 是 getter 函数 )， 或 ES6 代理 对 象 (参考 本 系列 的 《你 不 知 





道 的 JavaScript (下 卷 )》 的 “ES6 & Beyond” 部 分 ) 。 


考虑 : 





function foo() { 
console.log( b ); 
return 1; 


var a, b, c; 


// ES5.1 getter 字 面 量 语法 


c={ 
get bar() { 
ConsoLe.Log( a ); 
return 1; 
} 
找 
a = 10; 
b = 30; 
a += foo(); // 30 
b += c.bar; // 11 


console.log( a + b ); // 42 





如 果 不 是 因为 代码 片段 中 的 语句 console.1log(..) (只 是 作为 一 种 方便 的 形式 说 明 可 见 的 副 
作用 )，JavaScript 引擎 如 果 愿 意 的 话 ， 本 来 可 以 自由 地 把 代码 重新 排序 如 下 : 


/11 ..， 




















10 + foo(); 
30 + c.bar; 


a 
b 


a 





尽管 JavaScript 语义 让 我 们 不 会 见 到 编译 器 语句 重 排序 可 能 导致 的 虞 梦 ， 这 是 一 种 幸运 ， 
但 是 代码 编写 的 方式 (从 上 到 下 的 模式 ) 和 编译 后 执行 的 方式 之 间 的 联系 非常 脆弱 ， 理 解 
这 一 点 也 非常 重要 。 


编译 器 语句 重 排序 几乎 就 是 并 发 和 交互 的 微型 隐喻 。 作 为 一 个 一 般 性 的 概念 ， 清 楚 这 一 点 
能 够 使 你 更 好 地 理解 异步 JavaScript 代码 流 问 题 。 


























1.7 小结 

实际 上 ，JavaScript 程序 总 是 至 少 分 为 两 个 块 : 第 一 块 现 在 运行 ， 下 一 块 将 来 运行 ， 以 响 
应 某 个 事件 。 尽 管 程序 是 一 块 一 块 执 行 的 ， 但 是 所 有 这 些 块 共 享 对 程序 作用 域 和 状态 的 访 
问 ， 所 以 对 状态 的 修改 都 是 在 之 前 累积 的 修改 之 上 进行 的 。 


一 旦 有 事件 需要 运行 ， 事件 循环 就 会 运行 ， 直 到 队列 清空 。 事 件 循环 的 每 一 轮 称 为 一 个 
tick。 用 户 交 互 、IO 和 定时 器 会 向 事件 队列 中 加 入 事件 。 
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任意 时 刻 ， 一 次 只 能 从 队列 中 处 理 一 个 事件 。 执 行事 件 的 时 候 ， 可 能 直接 或 间接 地 引发 一 
个 或 多 个 后 续 事件 。 


并 发 是 指 两 个 或 多 个 事件 链 随时 间 发 展 交 奉 执行 ， 以 至 于 从 更 高 的 层次 来 看 ， 就 像 是 同时 
在 运行 (尽管 在 任意 时 刻 只 处 理 一 个 事件 )。 

通常 需要 对 这 些 并 发 执行 的 “进程 ”( 有 别 于 操作 系统 中 的 进程 概念 ) 进行 某 种 形式 的 交 
互 协调 ， 比 如 需要 确保 执行 顺序 或 者 需要 防止 觉 态 出 现 。 这 些 “ 进 程 ” 也 可 以 通过 把 自身 
分 割 为 更 小 的 块 ， 以 便 其 他 “进程 ”插入 进来 。 





















































处 理 所 有 事件 (异步 函数 调用 ) 的 单线 程 (一 次 一 个 ) 事件 循环 队列 。 








在 第 1 章 里 ， 我 们 探讨 了 与 JavaScript 异步 编程 相关 的 概念 和 术语 。 我 们 的 关注 点 是 理解 


我 们 还 介绍 了 多 个 


并 发 模式 以 不 同 的 方式 解释 同时 运行 的 事件 链 或 “进程 ”( 任 务 、 函 数 调 用 ， 等 等 ) 之 间 


的 关系 (如果 有 的 话 ! )。 
第 1 章 的 所 有 例子 都 是 把 函数 当 作 独 立 不 可 分 割 的 运作 单元 来 使 用 的 。 





在 函数 内 部 ， 语 句 





以 可 预测 的 顺序 执行 (在 编译 器 以 上 的 层级 ! )， 但 是 在 函数 顺序 这 一 层级 ， 事 件 (也 就 





是 异步 函数 调用 ) 的 运行 顺序 可 以 有 多 种 可 能 。 











用 ”到 程序 中 的 目标 ， 队 列 处 理 到 这 个 项 目的 时 候 会 运行 它 。 




















方式 。 确 实 ， 回 调 是 这 门 语言 中 最 基础 的 异步 模式 。 











在 所 有 这 些 示 例 中 ， 函 数 都 是 作为 回调 (callback) 使 用 的 ， 因 为 它 是 事件 循环 “回头 调 


你 肯定 已 经 注意 到 了 ， 到 目前 为 止 ， 回调 是 编写 和 处 理 JavaScript 程序 异步 逻辑 的 最 常用 





无 数 JavaScript 程序 ， 其 至 包括 一 些 最 为 高 深 和 复杂 的 ， 所 依赖 的 异步 基础 也 仅 限于 回调 
(当然 ， 它 们 使 用 了 第 1 章 介 绍 的 各 种 并 发 交互 模式 )。 回 调 函 数 是 JavaScript 的 异步 主力 














军 ， 并 且 它 们 不 辱 使 命 地 完成 了 自己 的 任务 。 











但 是 …… 回 调 函 数 也 不 是 没有 缺点 。 很 多 开发 者 因为 更 好 的 异步 模式 promise (promise 也 





是 “承诺 、 希 望 ” 的 意思 ， 此 处 一 语 双 关 ) 而 激动 不 已 。 但 是 ， 只 有 到 
标 和 原理 ， 才 能 有 效 地 应 用 这 种 抽象 机 制 。 


























E 解 了 某 种 抽象 的 目 


本 章 将 深入 探讨 这 两 点 ， 以 便 弄 懂 为 什么 更 高 级 的 异步 模式 (后续 章 生 和 附录 B 中 将 会 讨 
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2.1 continuation 
让 我 们 回 到 第 1 章 中 给 出 的 异步 回调 的 例子 ， 为 了 突出 重点 ， 以 下 稍 作 了 修改 : 
//A 


ajax( "..", function(..){ 











// A 和 // B 表 示 程 序 的 前 半 部 分 (也 就 是 现在 的 部 分 )， 而 // 标识 了 程序 的 后 半 部 分 
(也 就 是 将 来 的 部 分 )。 前 半 部 分 立刻 执行 ， 然 后 是 一 段 时 间 不 确定 的 停顿 。 在 未 来 的 某 个 
时 刻 ， 如 果 Ajax 调用 完成 ， 程 序 就 会 从 停 下 的 位 置 继续 执行 后 半 部 分 。 


换 名 话说， 回调 函数 包 囊 或 者 说 封装 了 程序 的 延续 (continuation)。 























让 我 们 进一步 简化 这 段 代码 : 


//A 


setTimeout( function(){ 


// C 
}, 1000 ); 
// B 


请 在 这 里 稍 作 停 留 ， 思 考 一 下 你 自己 会 如 何 (向 对 JavaScript 运作 机 制 不 其 了 解 的 某 位 人 
士 ) 描述 这 段 程序 的 和 运行 方式 。 然 后 试 着 把 你 的 描述 大 声 说 出 来 。 这 有 助 于 你 理解 我 接 下 
来 要 展示 的 要 点 。 


大 多 数 人 刚才 可 能 想到 或 说 出 的 内 容 会 类 似 于 “执行 A， 然 后 设 定 一 个 延 时 等 待 1000 宫 
秒 ， 到 时 后 马上 执行 C" 。 你 的 描述 准确 度 如 何 呢 ? 


也 可 能 进一步 修改 为 “执行 A， 设 定 延 时 1000 毫秒 ， 然 后 执行 B， 然 后 定时 到 时 后 执行 
C”。 这 比 第 一 个 版 本 要 更 精确 一 些 。 你 能 指出 其 中 的 区 别 吗 ? 


尽管 第 二 个 版 本 更 精确 一 些 ， 但 是 在 匹配 大 脑 对 这 段 代 码 的 理解 和 代码 对 于 JavaScript 引 
擎 的 意义 方面 ， 两 个 版 本 对 这 段 代 码 的 解释 都 有 不 足 。 这 种 不 匹配 既 微妙 又 显著 ， 也 正 是 
理解 回调 作为 异步 表达 和 管理 方式 的 缺陷 的 关键 所 在 。 


一 旦 我 们 以 回调 函数 的 形式 引入 了 单个 continuation (或 者 几 十 个 ， 就 像 很 多 程序 所 做 的 那 
样 ! )， 我 们 就 容许 了 大 脑 工 作 方 式 和 代码 执行 方式 的 分 歧 。 一 旦 这 两 者 出 现 分 歧 〈 这 远 
不 是 这 种 分 歧 出 现 的 唯一 情况 ， 我 想 你 明白 这 一 点 ! )， 我 们 就 得 面 对 这 样 一 个 无 法 逆转 
的 事实 : 代码 变 得 更 加 难以 理解 、 追 踪 、 调 试 和 维护 。 
























































YH 
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2.2 顺序 的 大 脑 


我 非常 确定 大 多 数 人 都 昕 到 过 别人 自称 “能 一 心 多 用 ”。 人 们 试图 让 自己 成 为 多 任务 执行 
者 的 努力 有 各 种 方式 ， 包 括 从 搞笑 (比如 小 孩 玩 的 拍 脑袋 然后 揉 肚 子 这 样 声 东 击 西 的 游戏 
招数 ) 到 日 常生 活 〈 边 走路 边 鄙 口香糖 ) ， 再 到 十 分 危险 的 行为 〈 边 开车 边 发 短信 )。 


但 是 ， 我 们 真 的 能 一 心 多 用 吗 ? 我 们 真 的 能 同时 执行 两 个 有 意识 的 、 故 意 的 动作 ， 并 对 二 
者 进行 思考 或 推理 吗 ? 我 们 最 高 级 的 大 脑 功能 是 以 并 行 多 线程 的 形式 运行 的 吗 ? 


























答案 可 能 出 乎 你 的 意料 : 很 可 能 并 不 是 这 样 。 


看 起 来 我 们 的 大 脑 并 不 是 以 这 样 的 方式 构建 起 来 的 。 很 多 人 (特别 是 A 型 人 ) 可 能 不 愿意 
承认 ， 但 我 们 更 多 是 单 任务 执行 者 。 实 际 上 ， 在 任何 特定 的 时 刻 ， 我 们 只 能 思考 一 件 事情 。 


我 这 里 所 说 的 并 不 是 所 有 我 们 不 自觉 、 无 意识 地 自动 完成 的 脑 功 能 ， 比 如 心跳 、 呼 吸 和 瞬 
眼 等 。 对 维持 生命 来 说 ， 这 些 是 至 关 重 要 的 ， 但 我 们 并 不 需要 有 意识 地 分 配 脑力 来 执行 这 
些 任务 。 谢 天 谢 地 ， 当 我 们 忙于 在 3 分 钟 内 第 15 次 查看 社交 网 络 更 新 时 ， 我 们 的 大 脑 在 
后 台 〈 多 线程 ! ) 执行 了 所 有 这 些 重 要 任务 。 


我 们 在 讨论 的 是 此 时 处 于 意识 前 端的 那些 任务 。 对 我 来 说 ， 此 时 此 刻 的 任务 就 是 编写 本 
书 。 就 在 此 刻 ， 我 还 在 执行 任何 其 他 更 高 级 的 脑 功能 吗 ? 不， 并 没有 。 我 很 容易 分 心 ， 并 
且 频 营地 分 心 一 写 前面 儿 段 的 时 候 就 分 心 了 几 十 次 ! 


我 们 在 假装 并 行 执行 多 个 任务 时 ， 实 际 上 极 有 可 能 是 在 进行 快速 的 上 下 文 切换 ， 比 如 与 朋 
友 或 家 人 电话 聊天 的 同时 还 试图 打字 。 换 句 话 说， 我 们 是 在 两 个 或 更 多 任务 之 间 快 速 连续 
地 来 回 切 换 ， 同 时 处 理 每 个 任务 的 微小 片段 。 我 们 切换 得 如 此 之 快 ， 以 至 于 对 外 界 来 说 ， 
我 们 就 像 是 在 并 行 地 执行 所 有 任务 。 


这 听 起 来 是 不 是 和 异步 事件 并 发 机 制 (比如 JavaScript 中 的 形式 ) 很 相似 呢 ?”! 如 果 你 还 
没 意 识 到 的 话 ， 就 回头 把 第 1 章 再 读 一遍 吧 ! 


























































































































实际 上 ， 把 广博 复杂 的 神经 学 简化 〈 即 误 用 ) 为 一 种 这 里 我 足以 讨论 的 形式 就 是 ， 我 们 大 
脑 的 工作 方式 有 点 类 似 于 事件 循环 队列 。 

如 果 把 我 打出 来 的 每 个 字母 (或 单词 ) 看 作 一 个 异步 事件 ， 那 么 在 这 一 句 中 我 的 大 脑 就 有 
几 十 次 机 会 被 其 他 某 个 事件 打 断 ， 比 如 因为 我 的 感官 甚至 随机 思绪 。 

我 不 会 在 每 次 可 能 被 打 断 的 时 候 都 转 而 投入 到 其 他 “进程 ”中 (这 值得 庆幸 ， 否 则 我 根本 
没 法 写 完 本 书 ! )。 但 是 ， 中 断 的 发 生 经 常 频繁 到 让 我 觉得 我 的 大 脑 几乎 是 不 停 地 切换 到 
不 同 的 上 下 文 〈 即 “进程 ”") 中 。 很 可 能 JavaScript 引擎 也 是 这 种 感觉 。 


























2.2.1 执行 与 计划 
好 吧 ， 所 以 我 们 的 大 脑 可 以 看 作 类 似 于 单线 程 运 行 的 事件 循环 队列 ， 就 像 JavaScript 引擎 
那样 。 这 个 比喻 看 起 来 很 贴切 。 








下 


但 是 ， 我 们 的 分 析 还 需要 比 这 更 加 深入 细致 一 些 。 显 而 易 见 的 是 ， 在 我 们 如 何 计划 各 种 任 
务 和 我 们 的 大 脑 如 何 实际 执行 这 些 计划 之 间 ， 还 存在 着 很 大 的 差别 。 














再 一 次 用 此 书 的 写作 进行 类 比 。 此 刻 ， 我 心里 大 致 的 计划 是 写 啊 写 啊 一 直 写 ， 依 次 完成 我 
脑海 中 已 经 按 顺 序 排 好 的 一 系列 要 点 。 我 并 没有 将 任何 中 断 或 非 线 性 的 行为 纳入 到 我 的 写 
作 计 划 中 。 然 而 ， 尽 管 如 此 ， 实 际 上 我 的 大 脑 还 是 在 不 停 地 切换 状态 。 


虽然 在 执行 的 层级 上 ， 我 们 的 大 脑 是 以 异步 事件 方式 运作 的 ， 但 我 们 的 任务 计划 似乎 还 是 
以 顺序 、 同 步 的 方式 进行 :“ 我 要 先 去 商店 ， 然 后 买点 牛奶 ， 然 后 去 一 下 干洗 店 。 


你 会 注意 到 ， 这 个 较 高 层级 的 思考 (计划) 过 程 看 起 来 并 不 怎么 符合 异步 事件 方式 。 实 际 
上 ， 我 们 认真 思考 的 时 候 很 少 是 以 事件 的 形式 进行 的 。 取 而 代 之 的 是 ， 我 们 按照 顺序 (A， 
然后 B， 然 后 C) 仔细 计划 着 ， 并 且 会 假定 有 某 种 形式 的 临时 阻塞 来 保证 B 会 等 待 A 完 
成 ，C 会 等 待 B 完成 。 

开发 者 编写 代码 的 时 候 是 在 计划 一 系列 动作 的 发 生 。 优 秀 的 开发 者 会 认真 计划 。 “我 需要 
把 z 设 为 x 的 值 ， 然 后 把 x 设 为 y 的 值 ”， 等 等 。 

编写 同步 代码 的 时 候 ， 语 句 是 一 条 接 一 条 执行 的 ， 其 工作 方式 非常 类 似 于 待 办 任务 清单 。 
// 交换 x 和 y( 通 过 临时 变量 z) 

ZX 

xX ys; 


y= 2Z; 


这 三 条 语句 是 同步 执行 的 ， 所 以 x = y 会 等 待 z = x 执行 完毕 , 然后 y = z 等 待 X = y 执 
行 完毕 。 换 个 说 法 就 是 ， 这 三 条 语句 临时 绑 定 按照 特定 顺序 一 个 接 一 个 地 执行 。 谢 天 谢 
地 ， 这 里 我 们 不 需要 处 理 异 步 事 件 的 细节 。 如 果 需 要 的 话 ， 代 码 马 上 就 会 变 得 复杂 得 多 ! 


所 以 ， 如 果 说 同步 的 大 脑 计划 能 够 很 好 地 映射 到 同步 代码 语句 ， 那 么 我 们 的 大 脑 在 规划 蜡 
步 代 码 方面 又 是 怎样 的 呢 ? 


答案 是 代码 〈 通 过 回调 ) 表达 异步 的 方式 并 不 能 很 好 地 映射 到 同步 的 大 脑 计划 行为 。 
实际 上 你 能 想象 按照 以 下 思路 来 计划 待 办 任务 吗 ? 













































































“我 要 去 商店 ， 但 是 路 上 肯定 会 接 到 电话 。“ 嗨 ， 妈 妈 。 ”然后 她 开始 说 话 的 时 候 ， 
我 要 在 GPS 上 查找 商店 的 地 址 ， 但 是 GPS 加 载 需 要 几 秒 钟 时 间 ， 于 是 我 把 收音 
机 的 音量 关 小 ， 以 便 听 清 妈妈 讲话 。 接 着 我 意识 到 忘 了 穿 外 套 ， 外 面 有 点 冷 ， 不 
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关系 ， 继 续 开车 ， 继 续 和 妈妈 打 电 话 。 这 时 候 安 全 带 警告 响起 ， 提 醒 我 系 好 
全 带 。 是 的 ， 妈 妈 ， 我 系 着 安全 带 呢 。 我 一 直 都 有 系 啊 ! ” 啊 ，GPS 终于 找 




















如 果 我 们 这 样 计 划一 天 中 要 做 什么 以 及 按 什么 顺序 来 做 的 话 ， 事 实 就 会 像 听 上 去 那样 鞠 
雇 。 但 是 ， 在 实际 执行 方面 ， 我 们 的 大 脑 就 是 这 么 运作 的 。 记 住 ， 不 是 多 任务 ， 而 是 快速 
的 上 下 文 切换 。 

















对 我 们 程序 员 来 说， 编写 异步 事件 代码 ， 特 别 是 当 回 调 是 唯一 的 实现 手段 时 ， 困 难 之 处 就 
在 于 这 种 思 萎 /计划 的 意识 流 对 我 们 中 的 绝 大 多 数 来 说 是 不 自然 的 。 

我 们 的 思考 方式 是 一 步 一 步 的 ， 但 是 从 同步 转换 到 异步 之 后 ， 可 用 的 工具 (回调 ) 却 不 是 
按照 一 步 一 步 的 方式 来 表达 的 。 


这 就 是 为 什么 精确 编写 和 追踪 使 用 回调 的 异步 JavaScript 代码 如 此 之 难 : 因为 这 并 不 是 我 
们 大 脑 进行 计划 的 运作 方式 。 























唯一 比 不 知道 代码 为 什么 骨 溃 更 可 怕 的 事情 是 ， 不 知道 为 什么 一 开始 它 是 工 
作 的 ! 这 就 是 经 典 的 “纸牌 屋 ” 心 理 :“ 它 可 以 工作 ， 可 我 不 知道 为 什么 ， 
所 以 谁 也 别 磁 它 ! ”你 可 能 听 说 过 “他 人 即 地 狱 ”(〈 萨 特 ) 这 种 说 法 ， 对 程 
序 员 来 说 则 是 “他 人 的 代码 即 地 狱 ” 。 而 我 深信 不 疑 的 是 :“ 不 理解 自己 的 代 
码 才 是 地 狱 。 回调 就 是 主要 元 凶 之 一 。 





























2.2.2 ”内 套 回调 与 链 式 回 调 
芳 虐 : 


listen( "click", function handler(evt){ 
setTimeout( function request(){ 
ajax( "http://some.url.1", function response(text){ 
if (text == "hello") { 
handler(); 


else if (text == "world") { 
request(); 
} 
} ); 
}, 500) ; 
a 


你 很 可 能 非常 熟悉 这 样 的 代码 。 这 里 我 们 得 到 了 三 个 函数 父 套 在 一 起 构成 的 链 ， 其 中 每 个 
函数 代表 异步 序列 任务,“ 进程 ”) 中 的 一 个 步骤 。 














这 种 代码 常常 被 称 为 回调 地 狱 (callback hell) ， 有 时 也 被 称 为 毁灭 金字 塔 (pyramid of 
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doom， 得 名 于 艇 套 缩 进 产生 的 横向 三 角形 状 )。 
但 实际 上 回调 地 狱 与 能 套 和 缩 进 几 乎 没有 什么 关系 。 它 引起 的 问题 要 比 这 些 严重 得 多 。 本 
章 后 面 的 内 容 会 就 此 类 问题 的 现象 和 原因 展开 讨论 。 


一 开始 我 们 在 等 待 click 事件 ， 然 后 等 待定 时 器 启动 ， 然 后 等 待 Ajax 响应 返回 ， 之 后 可 能 
再 重头 开始 。 
一 眼看 去 ， 这 段 代 码 似乎 很 自然 地 将 其 异步 性 映射 到 了 顺序 大 脑 计划 。 
首先 (现在 ) 我 们 有 : 
listen( "..", function handler(..){ 
人 Js 
然后 是 将 来 ， 我 们 有 : 
setTimeout( function request(..){ 


/de 
}, 500) ; 


接着 还 是 将 来 ， 我 们 有 : 
ajax( "..", function response(..){ 
//.. 
3 
最 后 (最 晚 的 将 来 )， 我 们 有 : 


le 汪 
else .. 
但 以 这 种 方式 线性 地 追踪 这 段 代码 还 有 儿 个 问题 。 


首先 ， 例 子 中 的 步骤 是 按照 1、2、3、4…… 的 顺序 ， 这 只 是 一 个 偶然 。 实 际 的 异步 
JavaScript 程序 中 总 是 有 很 多 噪声 ， 使 得 代码 更 加 杂乱 。 在 大 脑 的 演习 中 ， 我 们 需要 熟练 
地 绕 过 这 些 噪 声 ， 从 一 个 函数 跳 到 下 一 个 函数 。 对 于 这 样 满 是 回调 的 代码 ， 理 解 其 中 的 异 
步 流 不 是 不 可 能 ， 但 肯定 不 自然 ， 也 不 容易 ， 即 使 经 过 大 量 的 练习 也 是 如 此 。 


另外 ， 其 中 还 有 一 个 隐藏 更 深 的 错误 ， 但 在 代码 例子 中 ， 这 个 错误 并 不 明显 。 我 们 另外 设 
计 一 个 场景 〈 伪 代码 ) 来 展示 这 一 点 











doA( function(){ 
doB(); 





doC( function(){ 
doD(); 
}) 


doE(); 
3 


doF(); 


尽管 有 经 验 的 你 能 够 正确 确定 实际 的 运行 顺序 ， 但 我 到 打赌 ， 这 比 第 一 眼看 上 去 要 复杂 一 
些 ,， 需 要 费 一 番 脑 筋 才 能 想 清楚 。 实 际 运 行 顺序 是 这 样 的 : 





。 doA() 
。 doF() 
。 doB() 
。 doC() 
。 doE() 
。 doD() 


你 第 一 眼看 到 前 面 这 段 代 码 就 分 析出 正确 的 顺序 了 吗 ? 
好 吧 ， 有 些 人 可 能 会 认为 我 的 函数 命名 有 意 误导 了 大 家 ， 所 以 不 怎么 公平 。 我 发 四 ， 我 只 
是 按照 从 上 到 下 的 出 场 顺序 命名 的 。 不 过 还 是 让 我 再 试 一 次 吧 : 


doA( function(){ 
doC(); 


doD( function(){ 
doF(); 
}) 


doE(); 
} ); 


doB(); 
现在 ， 我 是 按照 实际 执行 顺序 来 命名 的 。 但 我 还 是 敢 打赌 ， 即 使 对 这 种 情况 有 了 经 验 ， 也 


不 能 自然 而 然 地 就 追踪 到 代码 的 执行 顺序 A 一 8B 一 一 50 一 E 一 F。 显 然 ， 你 需要 在 代码 中 
不 停 地 上 下 移动 视线 ， 对 不 对 ? 

















但 即使 你 能 够 很 轻松 地 得 出 结论 ， 还 是 有 一 个 可 能 导致 严重 问题 的 风险 。 你 能 够 指出 这 一 
点 吗 ? 





如 果 doA(..) 或 doD(..) 实际 并 不 像 我 们 假定 的 那样 是 异步 的 ， 情 况 会 如 何 呢 ? 啊 ， 那 顺 
序 就 更 麻烦 了 。 如 果 它 们 是 同步 的 〈 或 者 根据 程序 当时 的 状态 ， 只 在 某 些 情况 下 是 同步 
的 )， 那 么 现在 运行 顺序 就 是 A 一 C 一 D 一 F 一 E 一 B。 











现在 你 听 到 的 背景 中 模糊 的 声音 就 是 无 数 JavaScript 开发 者 的 掩 面 叹 息 。 





问题 是 出 在 嵌 套 上 吗 ? 是 它 导 致 跟踪 异步 流 如 此 之 难 吗 ? 确实 ， 部 分 原因 是 这 样 。 





但 是 ， 让 我 们 不 用 舱 套 再 把 前 面 的 肉 套 事件 /超时 /Ajax 的 例子 重 写 一 遍 吧 : 











listen( "click", handler ); 


function handler() { 
setTimeout( request, 500 ); 


) 


function request(){ 
ajax( "http://some.url.1", response ); 


function response(text){ 
if (text == "hello") { 
handler(); 


else if (text == "world") { 
request(); 
} 
} 


这 种 组 织 形式 的 代码 不 像 前 面 以 租 套 / 缩 进 的 形式 组 织 的 代码 那么 容易 识 另 
回调 地 狱 一 样 脆弱 ， 易 受 影响 。 为 什么 ? 


1 了 ， 但 是 它 和 

















在 线性 (顺序) 地 追踪 这 段 代 码 的 过 程 中 ， 我 们 不 得 不 从 一 个 函数 跳 到 下 一 个 ， 再 跳 到 下 
一 个 ， 在 整个 代码 中 跳 来 跳 去 以 “查看 ”流程 。 而 且 别 忘 了 ， 这 还 是 简化 的 形式 ， 只 考虑 
了 最 优 情况 。 我 们 都 知道 ， 真 实 的 异步 JavaScript 程序 代码 要 混乱 得 多 ， 这 使 得 这 种 追踪 
的 难度 会 成 倍增 加 。 

还 有 一 点 需要 注意 : 要 把 步骤 2、 步骤 3 和 步骤 4 连接 在 一 起 让 它们 顺序 执行 ， 只 用 回调 
的 话 ， 代 价 可 以 接受 的 唯一 方式 是 把 步 又 2 硬 编 码 到 步骤 1 中 ， 步 又 3 硬 编码 到 步骤 2 
中 ， 步 又 4 硬 编码 到 步骤 3 中 ， 以 此 类 推 。 如 果实 际 上 步骤 2 总 会 引出 步骤 3 是 一 个 固定 
条 件 的 话 ， 硬 编码 本 身 倒 不 一 定 是 坏事 。 
但 是 ， 硬 编码 表 定 会 使 代码 更 脆弱 一 些 ， 因 为 它 并 没有 考虑 可 能 导致 步骤 执行 顺序 偏离 的 
异常 情况 。 比 如 ， 如 有 果 步 又 2 失败 ， 就 永远 不 会 到 达 步 又 3， 不 管 是 重 试 步骤 2， 还 是 跳 
转 到 其 他 错误 处 理 流程 ， 等 等 。 

这 些 问 题 都 可 以 通过 在 每 个 步骤 中 手工 硬 编码 来 解决 ， 但 这 样 的 代码 通常 是 重复 的 ， 并 且 
在 程序 中 的 其 他 异步 流 中 或 其 他 步骤 中 无 法 复 用 。 

尽管 我 们 的 大 脑 能 够 以 顺序 的 方式 (这 个 ， 然 后 这 个 ， 然 后 这 个 ) 计划 一 系列 任务 ,但 大 
脑 运作 的 事件 化 的 本 质 使 得 控制 流 的 恢复 / 重 试 /复制 几乎 不 费 什么 力气 。 如 果 你 出 外 办 
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星 


囊 的 时 候 发 现 把 购物 清单 落 在 了 家 里 ， 那 么 这 一 天 并 不 会 因为 你 没有 预知 到 这 一 点 就 成 为 
世界 末日 了 。 你 的 大 脑 很 容易 就 能 针对 这 个 小 意外 做 出 计划 : 回 家 拿 清单 ， 然 后 立刻 返回 
商店 就 是 了 。 

但 是 ， 手工 硬 编码 (即使 包含 了 硬 编码 的 出 错 处 理 ) 回调 的 脆弱 本 性 可 就 远 没 有 这 么 优雅 


了 。 一 旦 你 指定 (也 就 是 预先 计划 ) 了 所 有 的 可 能 事件 和 路 径 ， 代 码 就 会 变 得 非常 复杂 ， 
以 至 于 无 法 维护 和 更 新 。 


























这 才 是 回调 地 狱 的 真正 问题 所 在 ! 散 套 和 缩 进 基本 上 只 是 转移 注意 力 的 枝 节 而 已 。 


如 果 这 还 不 够 的 话 ， 我 们 还 没有 提 及 两 个 或 更 多 回调 continuation 同时 发 生 的 情况 ， 或 者 
如 果 步 又 3 进入 了 带 有 gate 或 latch 的 并 行 回调 的 分 支 ， 还 有 …… 不 行 ， 我 脑子 转 不 动 了 ， 
你 怎么 样 ? ! 


现在 你 抓 住 重点 了 吗 ? 我 们 的 顺序 阻塞 式 的 大 脑 计 划 行 为 无 法 很 好 地 映射 到 面向 回调 的 异 
步 代码 。 这 就 是 回调 方式 最 主要 的 缺陷 ， 对 于 它们 在 代码 中 表达 异步 的 方式 ， 我 们 的 大 脑 
需要 努力 才能 同步 得 上 。 


2.3 信任 问题 


顺序 的 人 脑 计 划 和 回调 驱动 的 异步 JavaScript 代码 之 间 的 不 匹配 只 是 回调 问题 的 一 部 分 
还 有 一 些 更 座 入 的 问题 需要 考虑 。 


























让 我 们 再 次 思考 一 下 程序 中 把 回调 continuation (也 就 是 后 半 部 分 ) 的 概念 : 


// A 
ajax( "..", function(..){ 


// A 和 // 8B 发 生 于 现在 ， 在 JavaScript 主 程序 的 直接 控制 之 下 。 而 // 会 延迟 到 将 来 发 
生 ， 并且 是 在 第 三 方 的 控制 下 一 一 在 本 例 中 就 是 函数 ajax(..)。 从 根本 上 来 说 ， 这 种 控制 
的 转移 通常 不 会 给 程序 带 来 很 多 问题 。 


但 是 ， 请 不 要 被 这 个 小 概率 迷惑 而 认为 这 种 控制 切换 不 是 什么 大 问题 。 实 际 上 ， 这 是 回调 
驱动 设计 最 严重 (也 是 最 微妙 ) 的 问题 。 它 以 这 样 一 个 思路 为 中 心 : 有 时 候 ajax(..) (也 
就 是 你 交付 回调 continuation 的 第 三 方 ) 不 是 你 编写 的 代码 ， 也 不 在 你 的 直接 控制 下 。 多 
数 情况 下 ， 它 是 某 个 第 三 方 提 供 的 工具 。 


我 们 把 这 称 为 控制 反 转 (inversion of control) ， 也 就 是 把 自己 程序 一 部 分 的 执行 控制 交 给 某 
个 第 三 方 。 在 你 的 代码 和 第 三 方 工具 (一 组 你 希望 有 人 维护 的 东西 ) 之 间 有 一 份 并 没有 明 
确 表 达 的 契约 。 




















2.3.1 五 个 回调 的 故事 

可 能 现在 还 不 能 很 明显 地 看 出 为 什么 这 是 一 个 大 问题 。 让 我 构造 一 个 有 点 夸张 的 场景 来 说 
明 这 种 信任 风险 吧 。 

假设 你 是 一 名 开发 人 员 ， 为 其 个 销售 昂贵 电视 的 网 站 建立 商务 结账 系统 。 你 已 经 做 好 了 结 
账 系统 的 各 个 界面 。 在 最 后 一 页 ， 当 用 户 点 击 “ 确 定 ” 就 可 以 购买 电视 时 ， 你 需要 调用 
(假设 由 某 个 分 析 追 踪 公 司 提供 的 ) 第 三 方 函 数 以 便 跟踪 这 个 交易 。 

你 注意 到 ， 可 能 是 为 了 提高 性 能 ， 他 们 提供 了 一 个 看 似 用 于 异步 追踪 的 工具 ， 这 意味 着 你 
需要 传人 一 个 回调 函数 。 在 传 入 的 这 个 continuation 中 ， 你 需要 提供 向 客户 收费 和 展示 感 
谢 页 面 的 最 终 代 码 。 


代码 可 能 是 这 样 : 



































anaLytics.trackPurchase( purchaseData, function(){ 
chargeCreditCard(); 
displayThankyouPage(); 

}); 


很 简单 ， 是 不 是 ”你 写 好 代码 ， 通 过 测试 ， 一 切 正常 ， 然 后 就 进行 产品 部 署 。 皆 大 欢喜 |! 





六 个 月 过 去 了 ， 没 有 任何 问题 。 你 几乎 已 经 忘 了 自己 写 过 这 么 一 段 代 码 。 某 个 上 班 之 前 的 
早晨 ， 你 像 往常 一 样 在 咖啡 馆 里 享用 一 杯 拿 铁 。 突 然 ， 你 的 老板 惊慌 失措 地 打 电 话 过 来 ， 
让 你 放下 咖啡 赶紧 到 办 公 室 。 








到 了 办 公 室 ， 你 得 知 你 们 的 一 位 高 级 客户 购买 了 一 台电 视 ， 信 用 卡 却 被 刷 了 五 次 ， 他 很 生 
气 ， 这 可 以 理解 。 客 服 已 经 道歉 并 启动 了 退 款 流 程 。 但 是 ， 你 的 老板 需要 知道 这 样 的 事情 
为 何 会 出 现 。 “这 种 情况 你 没有 测试 过 吗 ? ! ” 














你 其 至 都 不 记得 自己 写 过 这 段 代码 。 但 是 ， 你 得 深入 研究 这 些 代 码 ， 并 开始 寻找 问题 产生 
的 原因 。 








通过 分 析 日 志 ， 你 得 出 一 个 结论 : 唯一 的 解释 就 是 那个 分 析 工 具 出 于 某 种 原因 把 你 的 回调 
调用 了 五 次 而 不 是 一 次 。 他 们 的 文档 中 完全 没有 提 到 这 种 情况 。 











诅 表 的 你 联系 他 们 的 客服 ， 而 客服 显然 和 你 一 样 吃惊 。 他 们 保证 ， 一 定 会 向 开发 者 提交 
事 ， 之 后 再 给 你 回复 。 第 二 天 ， 你 收 到 一 封 很 长 的 信 ， 是 解释 他 们 的 发 现 的 ， 于 是 你 立刻 
将 其 转发 给 你 的 老板 。 


显然 ， 分 析 公 司 的 开发 者 开发 了 一 些 实验 性 的 代码 ， 在 某 种 情况 下 ， 会 在 五 秒 钟 内 每 秒 重 
试 一 次 传 入 的 回调 函数 ， 然 后 才 会 因 超时 而 失败 。 他 们 从 来 没 打算 把 这 段 代 码 提交 到 产品 
中 ， 但 不 知道 为 什么 却 这 样 做 了 ， 他 们 很 是 爆 俯 ， 充 满 了 莱 意 。 他 们 以 漫长 的 篇 幅 解释 了 
他 们 是 如 何 确定 出 错 点 的 ， 并 保证 绝 不 会 再 发 生 同 样 的 事故 ， 等 等 。 
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然后 呢 ? 


你 和 老板 讨论 此 事 ， 他 对 这 种 状况 却 不 怎么 满意 。 他 坚持 认为 ， 你 不 能 再 信任 他 们 了 (你 
们 受到 了 伤害 )。 对 此 你 也 只 能 无 奈 接 受 ， 并 且 你 需要 找到 某 种 方法 来 保护 结账 代码 ， 保 
证 不 再 出 问题 。 


经 过 修补 之 后 ， 你 实现 了 像 下 面 这 样 的 简单 临时 代码 ， 大 家 似乎 也 很 满意 : 









































var tracked = false; 


analytics.trackPurchase( purchaseData, function(){ 
if (!tracked) { 
tracked = true; 
chargeCreditCard(); 
displayThankyouPage(); 


Ds 





经 过 第 1 章 之 后 ， 这 段 代码 对 你 来 说 应 该 很 熟悉 ， 因 为 这 里 我 们 其 实 就 是 创 
建 了 一 个 latch 来 处 理 对 回调 的 多 个 并 发 调用 。 











但 是 ， 后 来 有 一 个 QA 工程 师 问 道 :“ 如 果 他 们 根本 不 调用 这 个 回调 怎么 办 ? ” 咬 哆 ! 之 
前 你 们 双方 都 没有 想到 这 一 点 。 


然后 ， 你 开始 沿 着 这 个 兔子 洞 深 挖 下 去 ， 考 虑 着 他 们 调用 你 的 回调 时 所 有 可 能 的 出 错 情 
况 。 这 里 粗略 列 出 了 你 能 想到 的 分 析 工 具 可 能 出 错 的 情况 : 








。 调用 回调 过 早 (在 追踪 之 前 ) ， 

。 调用 回调 过 晚 (或 没有 调用 ) ; 

。 调用 回调 的 次 数 太 少 或 太 多 (就 像 你 遇 到 过 的 问题 ! ) ， 
。 没有 把 所 需 的 环境 /参数 成 功 传 给 你 的 回调 函数 ， 

。 知 掉 可 能 出 现 的 错误 或 异常 ， 





这 感觉 就 像 是 一 个 麻烦 列表 ， 实 际 上 它 就 是 。 你 可 能 已 经 开始 慢 慢 意识 到 ， 对 于 被 传 给 你 
无 法 信任 的 工具 的 每 个 回调 ， 你 都 将 不 得 不 创建 大 量 的 混乱 逻辑 。 





现在 你 应 该 更 加 明白 回调 地 狱 是 多 像 地 狱 了 吧 。 





2.3.2 不 只 是 别人 的 代码 
有 些 人 可 能 会 质疑 这 件 事情 是 否 真 像 我 声称 的 那么 严重 。 可 能 你 没有 真正 和 第 三 方 工具 打 








回调 | 171 


过 很 多 交道 ， 如 果 并 不 是 完全 没有 的 话 。 可 能 你 使 用 的 是 带 版 本 的 API 或 者 自 托管 的 库 ， 
所 以 其 行为 不 会 在 你 不 知道 的 情况 下 被 改变 。 














请 思考 这 一 点 : 你 能 够 真正 信任 理论 上 (在 自己 的 代码 库 中 ) 你 可 以 控制 的 工具 吗 ? 


不 妨 这 样 芳 虑 : 多 数 人 都 同意 ， 至 少 在 某 种 程度 上 我 们 应 该 在 内 部 函数 中 构建 一 些 防 御 性 
的 输入 参数 检查 ， 以 便 减少 或 阻止 无 法 预料 的 问题 。 


过 分 信任 输入 : 


function addNumbers(x,y) { 
// + 是 可 以 重 载 的 ,通过 类 型 转换 ,也 可 以 是 字符 串 连接 
// 所 以 根据 传人 参数 的 不 同 ,这 个 运算 并 不 是 严格 安全 的 


return x + y; 























3 


addNumbers( 21, 21 ); // 42 
addNumbers( 21, "21" ); // "2121" 


针对 不 信任 输入 的 防御 性 代码 : 





function addNumbers(x,y) { 
// 确保 输入 为 数字 
if (typeof x != "number" || typeof y != "number") { 
throw Error( "Bad parameters" ); 


} 
// 如 果 到 达 这 里 ,可 以 通过 + 安全 的 进行 数字 相 加 


return x + y; 

















3 


addNumbers( 21, 21 ); // 42 
addNumbers( 21, "21" ); // Error: "Bad parameters" 


依旧 安全 但 更 友好 一 些 的 : 


function addNumbers(x,y) { 
// 确保 输入 为 数字 
x = Number( x ); 
y = Number( y ); 


// + 安全 进行 数字 相 加 


return x + y; 


} 


addNumbers( 21, 21 ); // 42 
addNumbers( 21, "21" ); // 42 


管 你 怎么 做 ， 这 种 类 型 的 检查 /规范 化 的 过 程 对 于 函数 输入 是 很 常见 的 ， 即 使 是 对 于 理 
大 体 上 说 ， 这 等 价 于 那 条 地 缘 政 治 原则 :“ 信 任 ， 但 要 核实 。 








所 以 ， 据 此 是 不 是 可 以 推断 出 ， 对 于 异步 函数 回调 的 组 成 ， 我 们 应 该 要 做 同样 的 事情 ， 而 
不 只 是 针对 外 部 代码 ， 甚 至 是 我 们 知道 在 我 们 自己 控制 下 的 代码 ? 当然 应 该 。 


但 是 ， 回 调 并 没有 为 我 们 提供 任何 东西 来 支持 这 一 点 。 我 们 不 得 不 自己 构建 全 部 的 机 制 ， 
而 且 通 常 为 每 个 异步 回调 重复 这 样 的 工作 最 后 都 成 了 负担 。 





























回调 最 大 的 问题 是 控制 反 转 ， 它 会 导致 信任 链 的 完全 断裂 。 


如 有 果 你 的 代码 中 使 用 了 回调 ， 尤 其 是 但 也 不 限于 使 用 第 三 方 工 具 ， 而 且 你 还 没有 应 用 某 种 
逻辑 来 解决 所 有 这 些 控制 反 转 导致 的 信任 问题 ， 那 你 的 代码 现在 已 经 有 了 bug， 即 使 它们 
还 没有 给 你 造成 损害 。 隐 藏 的 bug 也 是 bug。 





确实 是 地 狱 。 


2.4 省 点 回调 


回调 设计 存在 几 个 变 体 ， 意 在 解决 前 面 讨 论 的 一 些 信任 问题 (不 是 全 部 ! )。 这 种 试图 从 
回调 模式 内 部 挽救 它 的 意图 是 勇敢 的 ， 但 却 广 定 要 失败 。 

举例 来 说 ， 为 了 更 优雅 地 处 理 错误 ， 有 些 API 设计 提供 了 分 离 回调 (一 个 用 于 成 功 通 知 ， 
一 个 用 于 出 错 通知 ) : 

















function Success(data) { 
console.log( data ); 


} 


function failure(err) { 
console.error( err ); 


} 


ajax( "http://some.url.1", success, failure ); 

















在 这 种 设计 下 ，API 的 出 错 处 理 函 数 failure() 常常 是 可 选 的 ， 女 
假定 这 个 错误 可 以 吞 掉 。 


有 果 设 有 提供 的 话 ， 就 是 





荆 





ES6 Promise API 使 用 的 就 是 这 种 分 离 回 调 设 计 。 第 3 章 会 介绍 ES6 Promise 
的 更 多 细节 。 























还 有 一 种 常见 的 回调 模式 叫 作 “error-first 风格 ”( 有 时 候 也 称 为 “Node 风格 ”， 因 为 几乎 
所 有 Nodejs API 都 采用 这 种 风格 ) ， 其 中 回调 的 第 一 个 参数 保留 用 作 错 误 对 象 《如果 有 的 
话 )。 如 果 成 功 的话 ， 这 个 参数 就 会 被 清空 / 置 假 (后 续 的 参数 就 是 成 功 数 据 )。 不 过 ， 如 
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果 产 生 了 错误 结果 ， 那 么 第 一 个 参数 就 会 被 置 起 / 置 真 (通常 就 不 会 再 传递 其 他 结果 ) : 


function response(err ,data) { 


// 出 错 ? 
if (err) { 


console.error( err ); 


} 
// 否则 认为 成 功 


else { 


console.log( data ); 


} 
} 


ajax( "http://some.url.1", response ); 


在 这 两 种 情况 下 ， 都 应 该 注意 到 以 下 儿 点 。 





首先 ， 这 并 没有 像 表 下 








ij 看 上 去 那样 真正 解决 主要 的 信任 问题 。 这 并 没有 涉及 阻止 或 过 滤 不 





想 要 的 重复 调用 回调 的 问题 。 现 在 事情 更 糟 了 ， 因 为 现在 你 可 能 同时 得 到 成 功 或 者 失败 的 
结果 ,或 者 都 没有 ， 并 且 你 还 是 不 得 不 编码 处 理 所 有 这 些 情况 。 





另外 ， 不 要 忽略 这 个 事实 : 尽管 这 是 一 种 你 可 以 采用 的 标准 模式 ， 但 是 它 上 骨 定 更 加 元 长 和 
村 起 化 ， 可 复 用 性 不 高 ， 所 以 你 还 得 不 导 其 烦 地 给 应 用 中 的 每 个 同调 添加 放样 的 代码 。 





那么 完全 不 调用 这 个 信任 问题 又 会 怎样 呢 ? 如 果 这 是 个 问题 的 话 〈 可 








应 该 是 个 问题 ! )， 











你 可 能 需要 设置 一 个 超时 来 取消 事件 。 可 以 构造 一 个 工具 (这 里 展示 的 只 是 一 个 “验证 概 
念 ”版 本 ) 来 帮助 实现 这 一 点 








function timeoutify(fn,delay) { 
var intv = setTimeout( function(){ 


intv 


= null; 


fn( new Error( "Timeout!" ) ); 


}, delay 


3 


) 


return function() { 
// 还 没有 超时 ? 
if (intv) { 
clearTimeout( intv ); 
fn.apply( this, arguments ); 


} 
二 
} 


以 下 是 使 用 方式 : 








// 使 用 "error-first 风格 " 回调 设计 


function foo(err, 


if (err) { 








data) { 


console.error( err ); 





} 
else { 
console.log( data ); 
} 
} 


ajax( "http://some.url.1", timeoutify( foo, 500 ) ); 





还 有 一 个 信任 问题 是 调用 过 早 。 在 特定 应 用 的 术语 中 ， 这 可 能 实际 上 是 指 在 某 个 关键 任务 
完成 之 前 调用 回调 。 但 是 更 通用 地 来 说 ， 对 于 既 可 能 在 现在 (同步 ) 也 可 能 在 将 来 ( 异 
步 ) 调用 你 的 回调 的 工具 来 说 ， 这 个 问题 是 明显 的 。 











这 种 由 同步 或 异步 行为 引起 的 不 确定 性 几乎 总 会 带 来 极 大 的 bug 追踪 难度 。 在 某 些 圈子 
里 ， 人 们 用 虚构 的 十 分 疯狂 的 恶魔 Zalgo 来 描述 这 种 同步 /异步 眶 梦 。 常 常会 有 “不 要 放 
出 Zalgo” 这 样 的 呼喊 ， 而 这 也 引出 了 一 条 非常 有 效 的 建议 : 永远 异步 调用 回调 ， 即 使 就 
在 事件 循环 的 下 一 轮 ， 这 样 ， 所 有 回调 就 都 是 可 预测 的 异步 调用 了 。 














关于 Zalgo 的 更 多 信息 ， 可 以 参考 Oren Golan 的 “Don't Release Zalgo!” (https:// 
github.com/oren/oren.github.io/blob/master/posts/zalgo.md) 以 及 Issac Z. Schlueter 的 
“Designing APIs for Asynchrony” (http://blog.izs.me/post/59142742143/designing-apis- 





for-asynchrony ) 。 


考虑 : 


function result(data) { 
console.log( a ); 


} 

var a = 0; 

ajax( "..pre-cached-url..", result ); 
att+t+; 





这 段 代 码 会 打印 出 8 (同步 回调 调用 ) 还 是 1 (异步 回调 调用 ) 呢 ? 这 要 视 情 况 而 定 。 





你 可 以 看 出 Zalgo 的 不 确定 性 给 JavaScript 程序 带 来 的 威胁 。 所 以 昕 上 去 有 点 傻 的 “不 要 
放出 Zalgo” 实 际 上 十 分 常用 ， 并且 也 是 有 用 的 建议 。 永 远 要 异步 。 











如 果 你 不 确定 关注 的 API 会 不 会 永远 异步 执行 怎么 办 呢 ?” 可 以 创建 一 个 类 似 于 这 个 “验证 
概念 ”版 本 的 asyncify(..) 工具 : 


function asyncify(fn) { 
var orig fn = fn, 
intv = setTimeout( function(){ 
intv = null; 
if (fn) fn(); 
}, 9 ) 
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fn = null; 


return function() { 
// 触发 太 快 ,在 定时 器 intv 触 发 指示 异步 转换 发 生 之 前 ? 
if (intv) { 
fn = orig fn.bind.apply( 
orig_fn, 
// 把 封装 器 的 this 添 加 到 bind(.. ) 调 用 的 参数 中 ， 
// 以 及 克 里 化 (currying) 所 有 传人 参数 
[this].concat( [l].slice.call( arguments ) ) 























); 
} 
// 已 经 是 异步 
else { 
// 调用 原来 的 函数 
orig fn.apply( this, arguments ); 
} 
}; 
} 


可 以 像 这 样 使 用 asyncify(..): 


function result(data) { 
console.log( a ); 


} 

var a = 0; 

ajax( "..pre-cached-url..", asyncify( result ) ); 
att+; 





不 管 这 个 Ajax 请 求 已 经 在 缓存 中 并 试图 对 回调 立即 调用 ， 还 是 要 从 网 络 上 取得 ， 进 而 在 
将 来 异步 完成 ， 这 段 代 码 总 是 会 输出 1， 而 不 是 o 一 一 resutt(..) 只 能 异步 调用 ， 这 意味 
着 at+ 有 机 会 在 result(..) 之 前 运行 。 

















好 啊 ， 又 “解决 ”了 一 个 信任 问题 ! 但 这 是 低 效 的 ， 而 且 也 会 带 来 膨胀 的 重复 代码 ， 使 你 
的 项 目 变 得 笨重 。 











这 就 是 回调 的 故事 ， 讲 了 一 遍 又 一 遍 。 它 们 可 以 实现 所 有 你 想 要 的 功能 ， 但 是 你 需要 努力 
才 行 。 这 些 努 力 通常 比 你 追踪 这 样 的 代码 能 够 或 者 应 该 付出 的 要 多 得 多 。 











可 能 现在 你 希望 有 内 建 的 API 或 其 他 语言 机 制 来 解决 这 些 问题 。 最 终 ，ES6 带 着 一 些 极 好 
的 答案 登场 了 ， 所 以 ， 继 续 读 下 去 吧 ! 











2.5 小结 
回调 函数 是 JavaScript 异步 的 基本 单元 。 但 是 随 着 JavaScript 越 来 越 成 熟 ， 对 于 异步 编程 领 











A 
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域 的 发 展 ， 回 调 已 经 不 够 用 了 。 


第 一 ， 大 脑 对 于 事情 的 计划 方式 是 线性 的 、 阻 塞 的 、 单 线程 的 语义 ， 但 是 回调 表达 异步 流 
程 的 方式 是 非 线性 的 、 非 顺序 的 ， 这 使 得 正确 推导 这 样 的 代码 难度 很 大 。 难 于 理解 的 代码 
是 坏 代码 ， 会 导致 坏 bug。 

















我 们 需要 一 种 更 同步 、 更 顺序 、 更 阻塞 的 的 方式 来 表达 异步 ， 就 像 我 们 的 大 脑 一 样 。 


第 二 ， 也 是 更 重要 的 一 点 ， 回 调 会 受到 控制 反 转 的 影响 ， 因 为 回调 暗中 把 控制 权 交 给 第 三 
方 (通常 是 不 受 你 控制 的 第 三 方 工具 ! ) 来 调用 你 代码 中 的 continuation。 这 种 控制 转移 导 
致 一 系列 麻烦 的 信任 问题 ， 比 如 回调 被 调用 的 次 数 是 否 会 超出 预期 。 











马 











可 以 发 明 一 些 特定 逻辑 来 解决 这 些 信任 问题 ， 但 是 其 难度 高 于 应 有 的 水 平 ， 可 能 会 产生 更 
笨重 、 更 难 维护 的 代码 ， 并 且 缺 少 足 够 的 保护 ， 其 中 的 损害 要 直到 你 受到 bug 的 影响 才 会 
被 发 现 。 


我 们 需要 一 个 通用 的 方案 来 解决 这 些 信任 问题 。 不 管 我 们 创建 多 少 回 调 ， 这 一 方案 都 应 可 
以 复 用 ， 且 没有 重复 代码 的 开销 。 

我 们 需要 比 回 调 更 好 的 机 制 。 到 目前 为 止 ， 回 调 提供 了 很 好 的 服务 ， 但 是 未 来 的 JavaScript 
需要 更 高 级 、 功 能 更 强大 的 异步 模式 。 本 书 接 下 来 的 几 章 会 深入 探讨 这 些 新 型 技术 。 
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promise 





在 第 2 章 里 ， 我 们 确定 了 通过 回调 表达 程序 异步 和 管理 并 发 的 两 个 主要 缺陷 : 缺乏 顺序 性 
和 可 信任 性 。 既 然 已 经 对 问题 有 了 充分 的 理解 ， 那 么 现在 是 时 候 把 注意 力 转向 可 以 解决 这 
些 问题 的 模式 了 。 


我 们 首先 想 要 解决 的 是 控制 反 转 问题 ， 其 中 ， 信 任 很 脆弱 ， 也 很 容易 失去 。 


回忆 一 下 ， 我 们 用 回调 函数 来 封装 程序 中 的 continuation， 然 后 把 回调 交 给 第 三 方 (其 至 可 
能 是 外 部 代码 )， 接 着 期 待 其 能 够 调用 回调 ， 实 现 正确 的 功能 


通过 这 种 形式 ， 我 们 要 表达 的 意思 是 :“ 这 是 将 来 要 做 的 事情 ， 要 在 当前 的 步骤 完成 之 后 
但 是 ， 如 果 我 们 能 够 把 控制 反 转 再 反 转 回来 ， 会 怎样 呢 ? 如 果 我 们 不 把 自己 程序 


continuation 传 给 第 三 方 ， 而 是 希望 第 三 方 给 我 们 提供 了 解 其 任务 何 时 结束 的 能 力 ， ， 
我 们 自己 的 代码 来 决定 下 一 步 做 什么 ， 那 将 会 怎样 呢 ? 


















































tt 长 











这 种 范式 就 称 为 Promise。 


随 着 开发 者 和 规范 撰写 者 绝望 地 清理 他 们 的 代码 和 设计 中 由 回调 地 狱 引 发 的 疯狂 行为 ， 
Promise 风暴 已 经 开始 席卷 JavaScript 世界 。 





























实际 上 ， 绝 大 多 数 JavaScripVDOM 平台 新 增 的 异步 API 都 是 基于 Promise 构建 的 。 所 以 学 
习 研 究 Promise 应 该 是 个 好 主意 ， 你 以 为 如 何 呢 ? ! 
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本 章 经 常会 使 用 “立即 ”一 词 ， 通 常用 来 描述 某 个 Promise 决议 (resolution) 
动作 。 但 是 ， 基 本 上 在 所 有 情况 下 ， 这 个 “立即 ” 指 任 务 队列 行为 (参见 第 
1 章 ) 方面 的 意义 ， 而 不 是 指 严 格 同步 的 现在 。 











3.1 什么 是 Promise 


开发 人 员 在 学 习 新 技术 或 新 模式 时 ， 通 常 第 一 步 就 是 “给 我 看 看 代码 ”。 对 我 们 来 说 ， 先 
跳 进 去 学 习 细 节 是 很 自然 的 。 








但 是 ， 事 实证 明 ， 只 了 解 API 会 丢失 很 多 抽象 的 细节 。Promise 属于 这 样 一 类 工具 : 通 
过 菜 人 使 用 它 的 方式 ， 很 容易 分 辩 他 是 真正 理解 了 这 门 技术 ， 还 是 仅仅 学 习 和 使 用 API 
而 已 。 








所 以 ， 在 展示 Promise 代码 之 前 ， 我 想 先 从 概念 上 完整 地 解释 Promise 到 底 是 什么 。 希 望 
这 能 够 更 好 地 指导 你 今后 将 Promise 理论 集成 到 自己 的 异步 流 中 。 











明确 这 一 点 之 后 ， 我 们 先 来 查看 一 下 关于 Promise 定义 的 两 个 不 同类 比 。 


3.1.1 未 来 值 

设想 一 下 这 样 一 个 场景 : 我 走 到 快餐 店 的 柜台 ， 点 了 一 个 芝士 汉堡 。 我 交 给 收银 员 1.47 美 
元 。 通 过 下 订单 并 付款 ， 我 已 经 发 出 了 一 个 对 某 个 值 (就 是 那个 汉堡 ) 的 请 求 。 我 已 经 启 
动 了 一 次 交易 。 

但 是 ， 通 常 我 不 能 马上 就 得 到 这 个 汉堡 。 收 银 员 会 交 给 我 某 个 东西 来 代 蔡 汉堡 : 一 张 带 有 
订单 号 的 收据 。 订 单 号 就 是 一 个 IOU (I owe you， 我 欠 你 的 ) 承诺 (promise)， 保 证 了 最 
终 我 会 得 到 我 的 汉堡 。 

所 以 我 得 好 好 保留 我 的 收据 和 订单 号 。 我 知道 这 代表 了 我 未 来 的 汉堡 ， 所 以 不 需要 担心 ， 
只 是 现在 我 还 是 很 饿 ! 

在 等 待 的 过 程 中 ， 我 可 以 做 点 其 他 的 事情 ， 比 如 给 朋友 发 个 短信 :“ 嗨 ， 要 来 和 我 一 起 吃 
午饭 吗 ? 我 正 要 吃 芝士 汉堡 。 





我 已 经 在 想 着 未 来 的 芝士 汉堡 了 ， 尽 管 现在 我 还 没有 拿 到 手 。 我 的 大 脑 之 所 以 可 以 这 么 
做 ， 是 因为 它 已 经 把 订单 号 当 作 芝 士 汉 堡 的 占 位 符 了 。 从 本 质 上 讲 ， 这 个 占 位 符 使 得 这 个 
值 不 再 依赖 时 间 。 这 是 一 个 未 来 值 。 


终于 ， 我 听 到 服务 员 在 喊 “ 订 单 113”， 然 后 愉快 地 拿 着 收据 走 到 柜台 ， 把 收据 交 给 收银 
员 ， 换 来 了 我 的 芝士 汉堡 。 


























换 名 话说， 一旦 我 需要 的 值 准 备 好 了 ， 我 就 用 我 的 承诺 值 (value-promise) 换取 这 个 值 
本 身 。 


但 是 ， 还 可 能 有 另 一 种 结果 。 他 们 叫 到 了 我 的 订单 号 ， 但 当 我 过 去 拿 芝士 汉堡 的 时 候 ， 收 
银 员 满 是 歉意 地 告诉 我 :“ 不 好 意思 ， 芝 士 汉堡 卖 完 了 。 除了 作为 顾客 对 这 种 情况 感到 愤 
轻 之 外 ， 我 们 还 可 以 看 到 未 来 值 的 一 个 重要 特性 : 它 可 能 成 功 ， 也 可 能 失败 。 

每 次 点 芝士 汉堡 ， 我 都 知道 最 终 要 么 得 到 一 个 芝士 汉堡 ， 要 么 得 到 一 个 汉堡 包 售 整 的 坏 消 
息 ， 那 我 就 得 找 点 别 的 当 午饭 了 。 





























在 代码 中 ， 事 情 并 非 这 么 简单 。 这 是 因为 ， 用 类 比 的 方式 来 说 就 是 ， 订 单 号 
可 能 永远 不 会 被 叫 到 。 在 这 种 情况 下 ， 我 们 就 永远 处 于 一 种 未 决议 状态 。 后 
面 会 讨论 如 何 处 理 这 种 情况 。 














1. 现在 值 与 将 来 值 
要 把 以 上 内 容 应 用 到 代码 里 的 话 ， 前 面 的 描述 有 点 过 于 抽象 ， 所 以 这 里 再 具体 说 明 一 下 。 





但 在 具体 解释 Promise 的 工作 方式 之 前 ， 先 来 推导 通过 我 们 已 经 理解 的 方式 一 一 回调 
如 何 处 理 未 来 值 。 

当 编 写 代码 要 得 到 某 个 值 的 时 候 ， 比 如 通过 数学 计算 ,不管 你 有 没有 意识 到 ， 你 都 已 经 对 
这 个 值 做 出 了 一 些 非常 基本 的 假设 ， 那 就 是 ， 它 已 经 是 一 个 具体 的 现在 值 : 








Var x,y = 2; 





console.log( x + y ); // NaN <-- 因为 x 还 没有 设 定 


运算 x + y 假 定 了 x 和 y 都 已 经 设 定 。 用 术语 简单 地 解释 就 是 ， 这 里 我 们 假定 x 和 y 的 值 
都 是 已 决议 的 。 





期 望 运算 符 + 本 身 能 够 神奇 地 检测 并 等 待 x 和 y 都 决议 好 (也 就 是 准备 好 ) 再 进行 运算 是 
没有 意义 的 。 如 果 有 的 语句 现在 完成 ， 而 有 的 语句 将 来 完成 ， 那 就 会 在 程序 里 引起 混乱 ， 
对 不 对 ? 


如 果 两 条 语句 的 任何 一 个 (或 全 部 ) 可 能 还 没有 完成 ， 你 怎么 可 能 追踪 这 两 条 语句 的 关系 
呢 ? 如 果 语 名 2 依赖 于 语句 1 的 完成 ， 那 么 就 只 有 两 个 输出 : 要 么 语句 1 马上 完成 , 一切 
顺利 执行 ， 要 么 语句 1 还 未 完成 ， 语 句 2 因此 也 将 会 失败 。 








学 完 第 1 章 之 后 ， 如 果 这 种 情况 你 听 起 来 很 熟悉 的 话 ， 非 常 好 ! 


让 我 们 回 到 x + y 这 个 算术 和 运算。 设想 如 果 可 以 通过 一 种 方式 表达 :“ 把 x 和 y 加 起 来 ， 
但 如 果 它 们 中 的 任何 一 个 还 没有 准备 好 ， 就 等 待 两 者 都 准备 好 。 一 旦 可 以 就 马上 执行 加 
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运算 。 由 


可 能 你 已 经 想到 了 回调 。 好 吧 ， 那 么 …… 





function add(getX,getY,cb) { 
var x, y; 
getX( function(xVal){ 
x = xVal; 
// 两 个 都 准备 好 了 ? 
if (y != Undefined) { 


cb( x+y ); // 发 送 和 
} 
}); 
getY( function(yVal){ 
y = yVal; 


// 两 个 都 准备 好 了 ? 
if (x != undefined) { 


cb( x+y); // 发 送 和 


} 
下 0 
} 


// fetchx() 和 fetchY() 是 同步 或 者 异步 函数 
add( fetchX, fetchY, function(sum){ 

console.log( sum ); // 是 不 是 很 容易 ? 
] ); 


先 暂 停 片 刻 ， 认 真 思考 一 下 这 段 代码 的 优美 度 (或 缺少 优美 度 ， 别 急 着 喝彩 )。 


尽管 其 中 的 丑陋 不 可 否认 ， 但 这 种 异步 模式 体现 























在 这 段 代 码 中 ， 我 们 把 x 和 y 当 作 未 来 值 ， 并 且 表 达 了 一 个 运算 add(..)。 


4 了 一 些 非 常 重要 的 东西 。 


这 个 运算 (从 


外 部 看 ) 不 在 意 x 和 y 现在 是 否 都 已 经 可 用 。 换 句 话 说 ， 它 把 现在 和 将 来 归 一 化 了 ， 因 此 
我 们 可 以 确保 这 个 add(…) 运算 的 输出 是 可 预测 的 。 








通过 使 用 这 个 时 间 上 一 致 的 add(..) 一 一 从 现在 到 将 来 的 时 间 ， 它 的 行为 都 是 一 致 的 一 一 


大 大 简化 了 对 这 段 异 步 代 码 的 追踪 。 


说 得 更 直 白 一 些 就 是 ， 为 了 统一 处 理 现 在 和 将 来 ， 我 们 把 它们 都 变 成 了 将 来 ， 即 所 有 的 操 





作 都 成 了 异步 的 。 





其 在 时 间 方 面 是 否 可 用 ， 这 只 是 很 小 的 第 一 步 。 


2. Promise 值 
本 章 后 面 一 定 会 深入 介绍 很 多 Promise 的 细节 ， 





因此 这 是 





有 如 果 读 起 来 有 些 


担心 。 我 们 先 来 大 致 看 一 下 如 何 通过 Promise 函数 表达 这 个 x + y 的 例子 : 


当然 ， 这 个 粗粮 的 基于 回调 的 方法 还 有 很 多 不 足 。 要 体会 追踪 未 来 值 的 益处 而 不 需要 考虑 


困惑 的 话 ， 不 必 
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function add(xPromise,yPromise) { 
// Promise.all([ .. ]) 接 受 一 个 promise 数 组 并 返回 一 个 新 的 promise， 
// 这 个 新 promise 等 待 数组 中 的 所 有 promise 完 成 


return Promise.all( [xPromise, yPromise] ) 





// 这 个 promise 决 议 之 后 ,我 们 取得 收 到 的 x 和 Y 值 并 加 在 一 起 
.then( function(values){ 
// values 是 来 自 于 之 前 决议 的 promisei 的 消息 数组 
return values[0] + values[1]; 


} ); 














} 


// fetchX() 和 fetchY() 返 回 相 应 值 的 promise, 可 能 已 经 就 绪 ， 
// 也 可 能 以 后 就 绪 
add( fetchX()，fetchY() ) 





// 我 们 得 到 一 个 这 两 个 数组 的 和 的 promise 
// 现在 链 式 调用 then(..) 来 等 待 返回 promise 的 决议 
.then( function(sum){ 
console.log( sum ); // 这 更 简单 ! 
}); 


这 段 代码 中 有 两 层 Promise。 








fetchx() 和 fetchY() 是 直接 调用 的 ， 它 们 的 返回 值 (promise ! ) 被 传 给 add(..)。 这 些 
promise 代表 的 底层 值 的 可 用 时 间 可 能 是 现在 或 将 来 ， 但 不 管 怎 样 ，promise pe 
为 的 一 致 性 。 我 们 可 以 按照 不 依赖 于 时 间 的 方式 追踪 值 x* 和 Y。 它 们 是 未 来 值 。 








第 二 层 是 add(..) (通过 Promise.all([ .. ])) 创建 并 返回 的 promise。 我 们 通过 调用 
then(..) 等 待 这 个 promise。add(..) 运算 完成 后 ， 未 来 值 sum 就 准备 好 了 ， 可 以 打印 出 
来 。 我 们 把 等 待 未 来 值 x 和 Y 的 逻辑 隐藏 在 了 add(..) 内 部 。 





在 add(..) 内 部 ，Promise.all([ .. ]) 调用 创建 了 一 个 promise (这 个 
promise 等 待 promiseX 和 promisey 的 决议 )。 链 式 调用 .then(..) 创建 了 
另外 一 个 promise。 这 个 promise 由 return values[0] + values[1] 这 一 
行 立 即 决 议 ( 得 到 加 运算 的 结 Ss 因此 ， 链 add(..) 调用 终止 处 的 调用 
then(..) 一 一 在 代码 结尾 处 J 第 二 个 promise， 而 
不 是 由 Promise.all([ .. ]) eb i 还 有 ， 尽 管 第 二 个 
then(..) 后 面 没 有 链接 任何 东西 ， 但 它 实 际 上 也 创建 了 一 个 新 的 promise， 
如 果 想 要 观察 或 者 使 用 它 的 话 就 可 以 看 到 。 本 章 后 面 会 详细 介绍 这 种 


Promise 链 。 
































就 像 芝 士 汉 堡 订单 一 样 ，Promise 的 决议 结果 可 能 是 拒绝 而 不 是 完成 。 拒 绝 值 和 完成 
的 Promise 不 一 样 : 完成 值 总 是 编程 给 出 的 ， 而 拒绝 值 ， 通 常 称 为 拒绝 原因 (rejection 
reason)， 可 能 是 程序 逻辑 直接 设置 的 ， 也 可 能 是 从 运行 异常 隐 式 得 出 的 值 。 





通过 Promise， 调 用 then(..) 实际 上 可 以 接受 两 个 函数 ， 第 一 个 用 于 完成 情况 (如 前 所 
示 )， 第 二 个 用 于 拒绝 情况 


add( fetchX()，fetchY() ) 
.then( 
// 完成 处 理 函 数 
function(sum) { 
console.log( sum ); 





抱 
// 拒绝 处 理 函 数 
function(err) { 
console.error( err ); // 烦 ! 





} 
) 
如 果 在 获取 Xx 或 Y 的 过 程 中 出 错 ， 或 者 在 加 法 过 程 中 出 错 ，add(..) 返回 的 就 是 一 个 被 拒 
绝 的 promise， 传 给 then(..) 的 第 二 个 错误 处 理 回 调 就 会 从 这 个 promise 中 得 到 拒绝 值 。 


从 外 部 看 ， 由 于 Promise 封装 了 依赖 于 时 间 的 状态 一 一 等 待 底层 值 的 完成 或 拒绝 ， 所 以 
Promise 本 身 是 与 时 间 无 关 的 。 因 此 ，Promise 可 以 按照 可 预测 的 方式 组 成 (组 合 )， 而 不 
用 关心 时 序 或 底层 的 结果 。 





另外 ， 一旦 Promise 决议 ， 它 就 永远 保持 在 这 个 状态 。 此 时 它 就 成 为 了 不 变 值 (immnutable 
value) ， 可 以 根据 需求 多 次 查看 。 


Promise 决议 后 就 是 外 部 不 可 变 的 值 ， 我 们 可 以 安全 地 把 这 个 值 传递 给 第 三 
方 ， 并 确信 它 不 会 被 有 意 无 意 地 修改 。 特 别 是 对 于 多 方 查看 同一 个 Promise 
决议 的 情况 ， 尤 其 如 此 。 一 方 不 可 能 影响 另 一 方 对 Promise 决议 的 观察 结果 。 
不 可 变性 听 起 来 似乎 一 个 学 术 话 题 ， 但 实际 上 这 是 Promise 设计 中 最 基础 和 
最 重要 的 因素 ， 我 们 不 应 该 随意 忽略 这 一 点 











这 是 关于 Promise 需要 理解 的 最 强大 也 最 重要 的 一 个 概念 。 经 过 大 量 的 工作 ， 你 本 可 以 通 
过 丑陋 的 回调 组 合 专门 创建 出 类 似 的 效果 ， 但 这 真 的 不 是 一 个 有 效 的 策略 ， 特 别 是 你 不 得 
不 一 次 又 一 次 重复 操作 。 


Promise 是 一 种 封装 和 组 合 未 来 值 的 易于 复 用 的 机 制 。 


3.1.2 ”完成 事件 
如 前 所 述 ， 单 独 的 Promise 展示 了 未 来 值 的 特性 。 但 是 ， 也 可 以 从 另外 一 个 角度 看 待 
Promise 的 决议 : 一 种 在 异步 任务 中 作为 两 个 或 更 多 步骤 的 流程 控制 机 制 ， 时 序 上 的 this- 


then-that。 








假定 要 调用 一 个 函数 foo(..) 执行 某 个 任务 。 我 们 不 知道 也 不 关心 它 的 任何 细节 。 这 个 图 





Promise | 183 


数 可 能 立即 完成 任务 ， 也 可 能 需要 一 段 时 间 才 能 完成 。 

我 们 只 需要 知道 foo(..) 什么 时 候 结束 ， 这 样 就 可 以 进行 下 一 个 任务 。 换 句 话说， 我 们 想 
要 通过 某 种 方式 在 foo(..) 完成 的 时 候 得 到 通知 ， 以 便 可 以 继续 下 一 步 。 

在 典型 的 JavaScript 风格 中 ， 如 果 需 要 侦 听 某 个 通知 ， 你 可 能 就 会 想到 事件 。 因 此 ， 可 


以 把 对 通知 的 需求 重新 组 织 为 对 foo(..) 发 出 的 一 个 完成 事件 (completion event， 或 
continuation 事件 ) 的 侦 听 。 






































是 叫 完成 事件 还 是 叫 continuation 事件 ， 取 决 于 你 的 视角 。 你 是 更 关注 
foo(..) 发 生 了 什么 ， 还 是 更 关注 foo(..) 之 后 发 生 了 什么 ? 两 种 视角 都 是 
合理 有 用 的 。 事 件 通 知 告诉 我 们 foo(..) 已 经 完成 ， 也 告诉 我 们 现在 可 以 
继续 进行 下 一 步 。 确 实 ， 传 递 过 去 的 回调 将 在 事件 通知 发 生 时 被 调用 ， 这 个 
回调 本 身 之 前 就 是 我 们 之 前 所 说 的 continuation。 完 成 事件 关注 foo(..) 更 
多 一 些 ， 这 也 是 目前 主要 的 关注 点 ， 所 以 在 后 面 的 内 容 中 ， 我 们 将 其 称 为 完 
成 事件 。 




































































使 用 回调 的 话 ， 通 知 就 是 任务 (foo(..)) 调用 的 回调 。 而 使 用 Promise 的 话 ， 我 们 把 这 个 
关系 反 转 了 过 来 ， 侦 听 来 自 foo(..) 的 事件 ， 然 后 在 得 到 通知 的 时 候 ， 根 据 情况 继续 。 


首先 ， 考 虑 以 下 伪 代 码 : 





foo(x) { 

// 开始 做 点 可 能 耗 时 的 工作 
foo( 42 ) 
on (foo "completion") { 


// 可 以 进行 下 一 步 了 ! 


on (foo "error") { 


// 啊 ,foo(..) 中 出 错 了 





} 





我 们 调用 foo(..)， 然 后 建立 了 两 个 事件 侦 听 器 ,一 个 用 于 "completion", 一 个 用 于 
foo(..) 调用 的 两 种 可 能 结果 。 从 本 质 上 讲 ，foo(..) 并 不 需要 了 解 调用 代码 订 
阅 了 这 些 事 件 ， 这 样 就 很 好 地 实现 了 关注 点 分 离 。 


遗憾 的 是 ， 这 样 的 代码 需要 JavaScript 环境 提供 某 种 魔法 ， 而 这 种 环境 并 不 存在 (实际 上 
也 有 点 不 实际 )。 以 下 是 在 JavaScript 中 更 自然 的 表达 方法 : 





"error" 





function foo(x) { 


// 开始 做 点 可 能 耗 时 的 工作 
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// 构造 一 个 Listener 事 件 通 知 处 理 对 象 来 返回 





return listener; 


} 
var evt = foo( 42 ); 


evt.on( "completion", function(){ 
// 可 以 进行 下 一 步 了 ! 
于 


evt.on( "failure", function(err){ 
// 啊 ,foo(..) 中 出 错 了 

}); 
foo(..) 显 式 创建 并 返回 了 一 个 事件 订阅 对 象 ， 调 用 代码 得 到 这 个 对 象 ， 并 在 其 上 注册 了 
两 个 事件 处 理 函 数 。 
相对 于 面向 回调 的 代码 ， 这 里 的 反 转 是 显而易见 的 ， 而 且 这 也 是 有 意 为 之 。 这 里 没有 把 
调 传 给 foo(..)， 而 是 返回 一 个 名 为 evt 的 事件 注册 对 象 ， 由 它 来 接受 回调 。 
如 果 你 回想 一 下 第 2 章 的 话 ， 应 该 还 记得 回调 本 身 就 表达 了 一 种 控制 反 转 。 所 以 对 回调 模 
式 的 反 转 实际 上 是 对 反 转 的 反 转 ， 或 者 称 为 反 控制 反 转 一 一 把 控制 返还 给 调用 代码 ， 这 也 
是 我 们 最 开始 想 要 的 效果 。 






































回 




















一 个 很 重要 的 好 处 是 ， 可 以 把 这 个 事件 侦 听 对 象 提 供给 代码 中 多 个 独立 的 部 分 ;在 
foo(..) 完成 的 时 候 ， 它 们 都 可 以 独立 地 得 到 通知 ， 以 执行 下 一 步 : 











var evt = foo( 42 ); 


// 让 bar(..) 侦 听 foo(..) 的 完成 
bar( evt ); 





// 并 且 让 baz(..) 侦 听 foo(..) 的 完成 


baz( evt ); 














对 控制 反 转 的 恢复 实现 了 更 好 的 关注 点 分 离 ， 其 中 bar(..) 和 baz(..) 不 需要 牵扯 到 
foo(..) 的 调用 细节 。 类 似 地 ，foo(..) 不 需要 知道 或 关注 bar(..) 和 baz(..) 是 否 存在 ， 
或 者 是 否 在 等 待 foo(.…) 的 完成 通知 。 


从 本 质 上 说 ，evt 对 象 就 是 分 离 的 关注 点 之 间 一 个 中 立 的 第 三 方 协商 机 制 。 


Promise“ 事 件 ” 
你 可 能 已 经 猜 到 ， 事 件 侦 听 对 象 evt 就 是 Promise 的 一 个 模拟 。 





在 基于 Promise 的 方法 中 ， 前 面 的 代码 片段 会 让 foo(..) 创建 并 返回 一 个 Promise 实例 ， 而 
日 这 个 Promise 会 被 传递 到 bar(..) 和 baz(..) 
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我 们 侦 听 的 Promise 决议 “事件 ”严格 说 来 并 不 算是 事件 (尽管 它们 实现 目 
标的 行为 方式 确实 很 像 事 件 )， 通 常 也 不 叫 作 "completion" 或 "error"。 事 
实 上 ， 我 们 通过 then(..) 注册 一 个 "then" 事件 。 或 者 可 能 更 精确 地 说 ， 
then(..) 注册 "fullfitllment" 和 /或 "rejection" 事件 ， 尽 管 我 们 并 不 会 
在 代码 中 直接 使 用 这 些 术 语 。 
































考虑 : 


function foo(x) { 


// 可 是 做 一 些 可 能 耗 时 的 工作 


// 构造 并 返回 一 个 promise 

return new Promise( function(resolve,reject){ 
// 最 终 调用 resoLve(..) 或 者 reject(..) 
// 这 是 这 个 promise 的 决议 回调 

}); 





} 
var p = foo( 42 ); 
bar( p ); 


baz( p ); 


new Promise( function(..){ .. } ) 模式 通常 称 为 revealing constructor 
(http:/domenic.me/2014/02/13/the-revealing-constructor-pattern/) 。 传 入 的 函数 
会 立即 执行 (不 会 像 then(..) 中 的 回调 一 样 异步 延迟 ) ， 它 有 两 个 参数 ， 在 
本 例 中 我 们 将 其 分 别称 为 resolve 和 reject。 这 些 是 promise 的 决议 函数 。 
resolve(..) 通常 标识 完成 ， 而 reject(..) 则 标识 拒绝 。 





Ey 


尔 可 能 会 猪 测 bar(..) 和 baz(..) 的 内 部 实现 或 许 如 下 : 


function bar(foopromise) { 
// 侦 听 foo(..) 完 成 
foopromise. then( 
function(){ 


// foo(..) 已 经 完毕 ,所 以 执行 bar(.. ) 的 任务 





}, 


function(){ 


// 啊 ,foo(.…) 中 出 错 了 ! 





} 
站 
} 


// 对 于 baz(..) 也 是 一 样 


Promise 决议 并 不 一 定 要 像 前 面 将 Promise 作为 未 来 值 查看 时 一 样 会 涉及 发 送 消 息 。 它 也 可 
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以 只 作为 一 种 流程 控制 信号 ， 就 像 前 面 这 段 代码 中 的 用 法 一 样 。 
另外 一 种 实现 方式 是 : 
function bar() { 
// foo(..) 肯 定 已 经 完成 ,所 以 执行 bar(..) 的 任务 
上 


function oopsBar() { 


// 啊 ,foo(..) 中 出 错 了 ,所 以 bar(..) 没 有 运行 
// 对 于 baz() 和 oopsBaz() 也 是 一 样 
var p = foo( 42 ); 
p.then( bar, oopsBar ); 


p.then( baz, oopsBaz ); 


如 果 以 前 有 过 基于 Promise 的 编码 经 验 的 话 ， 那 你 可 能 就 会 不 禁 认为 前 面 代 
码 的 最 后 两 行 可 以 用 链接 的 方式 写作 p.then( ” .. ).then( .， )， 
而 不 是 p.then(..); then(..)。 但 是 ， 请 注意 ， 那 样 写 的 话 意 义 就 完全 不 同 
了 ! 目前 二 者 的 区 别 可 能 还 不 是 很 清晰 ， 但 与 目前 为 止 我 们 看 到 的 相 比 ， 这 
确实 是 一 种 不 同 的 异步 模式 一 一 分 割 与 复制 。 别 担心 ， 对 于 这 一 点 ， 本 章 后 
面 还 会 深入 介绍 。 























这 里 没有 把 promise p 传 给 bar(..) 和 baz(..)， 而 是 使 用 promise 控制 bar(..) 和 baz(..) 
何 时 执行 ， 如 果 执 行 的 话 。 最 主要 的 区 别 在 于 错误 处 理 部 分 。 




















在 第 一 段 代 码 的 方法 里 ， 不 论 foo(..) 成 功 与 否 ，bar(..) 都 会 被 调用 。 并 且 如 果 收 到 了 
foo(..) 失败 的 通知 ， 它 会 亲自 处 理 自己 的 回 退 逻辑 。 显 然 ，baz(..) 也 是 如 此 。 




















在 第 二 段 代 码 中 ，bar(..) 只 有 在 foo(..) 成 功 时 才 会 被 调用 ， 否 则 就 会 调用 oppsBar(..)。 
baz(..) 也 是 如 此 。 


这 两 种 方法 本 身 并 谈 不 上 对 错 ， 只 是 各 自 适用 于 不 同 的 情况 。 





不 管 哪 种 情况 ， 都 是 从 foo(..) 返回 的 promise p 来 控制 接 下 来 的 步骤 。 





另外 ， 两 段 代 码 都 以 使 用 promise p 调用 then(. . ) 两 次 结束 。 这 个 事实 说 明了 前 面 的 观点 ， 
就 是 Promise (一 旦 决议 ) 一 直 保 持 其 决议 结果 (完成 或 拒绝 ) 不 变 ， 可 以 按照 需要 多 次 
查看 。 


一 旦 p 决议 , 不 论 是 现在 还 是 将 来 ， 下 一 个 步骤 总 是 相同 的 。 
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3.2 具有 then 方法 的 鸭子 类 型 

在 Promise 领域 ， 一 个 重要 的 细节 是 如 何 确 定 某 个 值 是 不 是 真正 的 Promise。 或 者 更 直接 地 
说 ， 它 是 不 是 一 个 行为 方式 类 似 于 Promise 的 值 ? 

既然 Promise 是 通过 new Promise(..) 语法 创建 的 ， 那 你 可 能 就 认为 可 以 通过 p instanceof 
Promise 来 检查 。 但 遗憾 的 是 ， 这 并 不 足以 作为 检查 方法 ， 原 因 有 许多 。 

其 中 最 主要 的 是 ，Promise 值 可 能 是 从 其 他 浏览 器 窗口 (iframe 等 ) 接收 到 的 。 这 个 浏览 
器 窗口 自己 的 Promise 可 能 和 当前 窗口 /frame 的 不 同 ， 因 此 这 样 的 检查 无 法 识别 Promise 
实例 。 























还 有 ， 库 或 框架 可 能 会 选择 实现 自己 的 Promise， 而 不 是 使 用 原生 ES6 Promise 实现 。 实 际 
上 ,很 有 可 能 你 是 在 早期 根本 没有 Promise 实现 的 浏览 器 中 使 用 由 库 提供 的 Promise。 











在 本 章 后 面 讨论 Promise 决议 过 程 的 时 候 ， 你 就 会 了 解 为 什么 有 能 力 识别 和 判断 类 似 于 
Promise 的 值 是 否 是 真正 的 Promise 仍然 很 重要 。 不 过 ， 你 现在 只 要 先 记 住 我 的 话 ， 知 道 这 
一 点 很 重要 就 行 了 。 














因此 ， 识 别 Promise (或 者 行为 类 似 于 Promise 的 东西 ) 就 是 定义 某 种 称 为 thenable 的 东 
西 ， 将 其 定义 为 任何 具有 then(..) 方法 的 对 象 和 国 数 。 我 们 认为 ， 任 何 这 样 的 值 就 是 
Promise 一 致 的 thenable。 




















根据 一 个 值 的 形态 (具有 哪些 属性 ) 对 这 个 值 的 类 型 做 出 一 些 假 定 。 这 种 类 型 检查 (type 
check) 一 般 用 术语 鸭子 类 型 (duck typing) 来 表示 一 “如 果 它 看 起 来 像 只 鸭子 ， 叫 起 来 
像 只 鸭子 ， 那 它 一 定 就 是 只 鸭子 ”( 参 见 本 书 的 “类 型 和 语法 ”部 分 )。 于 是 ， 对 thenable 
值 的 鸭子 类 型 检测 就 大 致 类 似 于 : 























if ( 
p !== null && 
( 
typeof p === "object" || 
typeof p === "function" 
) 8& 
typeof p.then === "function" 
js{ 


// 假定 这 是 一 个 thenable! 
else { 
// 不 是 thenable 
} 
除了 在 多 个 地 方 实现 这 个 逻辑 有 点 丑陋 之 外 ， 其 实 还 有 一 些 更 深层 次 的 麻烦 。 


如 果 你 试图 使 用 恰好 有 then(..) 函数 的 一 个 对 象 或 函数 值 完成 一 个 Promise， 但 并 不 希望 
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它 被 当 作 Promise 或 thenable， 那 就 有 点 麻烦 了 ， 因 为 它 会 自动 被 识别 为 thenable， 并 被 按 
照 特 定 的 规则 处 理 (参见 本 章 后 面 的 内 容 )。 

















即使 你 并 没有 意识 到 这 个 值 有 then(..) 函数 也 是 这 样 。 比 如 : 











var o = { then: function(){} }; 


// 让 v [[Prototype]]-Link 到 o 
var v = 0bject.create( o ); 


V.SomeStuff = "cool"; 
v.otherStuff = "not so cool"; 
v.hasOwnProperty( "then"” ); // false 


v 看 起 来 根本 不 像 Promise 或 thenable。 它 只 是 一 个 具有 一 些 属性 的 简单 对 象 。 你 可 能 只 是 
想 要 像 对 其 他 对 象 一 样 发 送 这 个 值 。 








但 你 不 知道 的 是 ，v 还 [[Prototype]] 连接 (参见 《你 不 知道 的 JavaScript (上 卷 )》 的 
“this 和 对 象 原型 ”部 分 ) 到 了 另外 一 个 对 象 o， 而 后 者 恰好 具有 一 个 then(..) 属性 。 所 以 
thenable 鸭子 类 型 检测 会 把 v 认 作 一 个 thenable。 


甚至 不 需要 是 直接 有 意 支 持 的 : 











Object.prototype.then = function(){}; 
Array.prototype.then = function(){}; 


var v1 
Var v2 


{ hello: "world" }; 
[ "Hello", "World" ]; 


v1i 和 v2 都 会 被 认 作 thenable。 如 果 有 任何 其 他 代码 无 意 或 恶意 地 给 0bject.prototype、 
Array.prototype 或 任何 其 他 原生 原型 添加 then(..)， 你 无 法 控制 也 无 法 预测 。 并 且 ， 如 果 

站 定 的 是 不 调用 其 参数 作为 回调 的 函数 ， 那 么 如 果 有 Promise 决议 到 这 样 的 值 ， 就 会 永远 
挂 住 ! 真是 疯狂 。 






































难以 置信 ? 可 能 吧 。 


但 是 别 忘 了 ， 在 ES6 之 前 ， 社 区 已 经 有 一 些 若 名 的 非 Promise 库 恰 好 有 名 为 then(.…) 的 方 
法 。 这 些 库 中 有 一 部 分 选择 了 重 命名 自己 的 方法 以 避免 冲突 (这 真 糟糕 ! )。 而 其 他 的 那 
些 库 只 是 因为 无 法 通过 改变 摆脱 这 种 冲突 ， 就 很 不 幸 地 被 降级 进入 了 “与 基于 Promise 的 
编码 不 兼容 ”的 状态 。 


标准 决定 支持 之 前 未 保留 的 一 一 昕 起 来 是 完全 通用 的 一 一 属性 名 then。 这 意味 着 所 有 值 
(或 其 委托 ) ， 不 管 是 过 去 的 、 现 存 的 还 是 未 来 的 ， 都 不 能 拥有 then(..) 函数 ， 不 管 是 有 意 
的 还 是 无 意 的， 否则 这 个 值 在 Promise 系统 中 就 会 被 误 认 为 是 一 个 thenable， 这 可 能 会 导 
致 非常 难以 追踪 的 bug。 
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我 并 不 喜欢 最 后 还 得 用 thenable 鸭子 类 型 检测 作为 Promise 的 识别 方案 。 还 
有 其 他 选择 ， 比 如 branding， 甚 至 anti-branding。 可 我 们 所 用 的 似乎 是 针 
对 最 差 情 况 的 妥协 。 但 情况 也 并 不 完全 是 一 片 黯 淡 。 后 面 我 们 就 会 看 到 ， 
thenable 鸭子 类 型 检测 还 是 有 用 的 。 只 是 要 清楚 ， 如 果 thenable 鸭子 类 型 误 
把 不 是 Promise 的 东西 识别 为 了 Promise， 可 能 就 是 有 害 的 。 

















3.3 Promise 信任 问题 


前 面 已 经 给 出 了 两 个 很 强 的 类 比 ， 用 于 解释 Promise 在 不 同方 面 能 为 我 们 的 异步 代码 做 些 
什么 。 但 如 果 止 步 于 此 的 话 ， 我 们 就 错过 了 Promise 模式 构建 的 可 能 最 重要 的 特性 : 信任 。 


未 来 值 和 完成 事件 这 两 个 类 比 在 我 们 之 前 探讨 的 代码 模式 中 很 明显 。 但 是 ， 我 们 还 不 能 一 
眼 就 看 出 Promise 为 什么 以 及 如 何 用 于 解决 2.3 节 列 出 的 所 有 控制 反 转 信任 问题 。 稍 微 深 
入 探究 一 下 的 话 ， 我 们 就 不 难 发 现 它 提供 了 一 些 重要 的 保护 ， 重 新 建立 了 第 2 章 中 已 经 毁 
掉 的 异步 编码 可 信任 性 。 





























先 回顾 一 下 只 用 回调 编码 的 信任 问题 。 把 一 个 回调 传 入 工具 foo(..) 时 可 能 出 现 如 下 问题 : 








。 调用 回调 过 早 ， 

。 调用 回调 过 晚 (或 不 被 调用 ) ; 
。 调用 回调 次 数 过 少 或 过 多 ， 

。 未 能 传递 所 需 的 环境 和 参数 ， 

。 否 掉 可 能 出 现 的 错误 和 异常 。 











Promise 的 特性 就 是 专门 用 来 为 这 些 问题 提供 一 个 有 效 的 可 复 用 的 答案 。 


3.3.1 调用 过 早 
这 个 问题 主要 就 是 担心 代码 是 否 会 引入 类 似 Zalgo 这 样 的 副作用 (参见 第 2 章 )。 在 这 类 问 
题 中 ， 一 个 任务 有 时 同步 完成 ， 有 时 异步 完成 ， 这 可 能 会 导致 竞 态 条 件 。 





根据 定义 ，Promise 就 不 必 担 心 这 种 问题 ， 因 为 即使 是 立即 完成 的 Promise (类 似 于 new 
Promise(function(resolve){ resolve(42); })) 也 无 法 被 同步 观察 到 。 


也 就 是 说 ， 对 一 个 Promise 调用 then(..) 的 时 候 ， 即 使 这 个 Promise 已 经 决议 ， 提 供给 
then(..) 的 回调 也 总 会 被 异步 调用 (对 此 的 更 多 讨论 ， 请 参见 1.5 节 )。 








不 再 需要 插入 你 自己 的 setTimeout(..,0) hack，Promise 会 自动 防止 Zalgo 出 现 。 





3.3.2 ”调用 过 晚 

和 前 面 一 点 类 似 ，Promise 创建 对 象 调用 resotve(..) 或 reject(..) 时 ， 这 个 Promise 的 
then(..) 注册 的 观察 回调 就 会 被 自动 调度 。 可 以 确信 ， 这 些 被 调度 的 回调 在 下 一 个 异步 事 
件 点 上 一 定 会 被 触发 (参见 1.5 节 )。 








同步 查看 是 不 可 能 的 ， 所 以 一 个 同步 任务 链 无 法 以 这 种 方式 运行 来 实现 按照 预期 有 效 
延迟 另 一 个 回调 的 发 生 。 也 就 是 说 ， 一 个 Promise 决议 后 ， 这 个 Promise 上 所 有 的 通过 
then(..) 注册 的 回调 都 会 在 下 一 个 异步 时 机 点 上 依次 被 立即 调用 (再 次 提醒 ， 请 参见 1.5 
市 )。 这 些 回调 中 的 任意 一 个 都 无 法 影响 或 延误 对 其 他 回调 的 调用 。 


举例 来 说 : 























p.then( function(){ 
p.then( function(){ 
console.log( "C" ); 


}); 
console.log( "A" ); 
于 
p.then( function(){ 
console.log( "B" ); 
} ); 
// ABC 


这 里 ，"5" 无 法 打 断 或 抢占 "B"， 这 是 因为 Promise 的 运作 方式 。 


Promise 调度 技巧 
但 是 ， 还 有 很 重要 的 一 点 需要 指出 ， 有 很 多 调度 的 细微 差别 。 在 这 种 情况 下 ， 两 个 独立 
Promise 上 链接 的 回调 的 相对 顺序 无 法 可 靠 预测 。 





如 果 两 个 promise p1 和 p2 都 已 经 决议 ， 那 么 pt.then(..); p2.then(..) 应 该 最 终 会 先 调用 
pl 的 回调 ， 然 后 是 p2 的 那些 。 但 还 有 一 些微 妙 的 场景 可 能 不 是 这 样 的 ， 比 如 以 下 代码 : 


var p3 = new Promise( function(resolve,reject){ 
resoLve( "B" ); 


He 


var pl = new Promise( function(resolve,reject){ 
resoLve( p3 ); 
} 3 


p2 = new Promise( function(resolve,reject){ 
resoLve( "A" ); 


于 5 


p1.then( function(v){ 
console.log( v ); 


9 
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p2.then( function(v){ 
console.log( v ); 


下 入 
// A B ”<-- 而 不 是 像 你 可 能 认为 的 B A 








后 面 我 们 还 会 深入 介绍 ， 但 目前 你 可 以 看 到 ，p1 不 是 用 立即 值 而 是 用 另 一 个 promise p3 决 
议 ， 后 者 本 身 决议 为 值 "B"。 规 定 的 行为 是 把 p3 展开 到 p1， 但 是 是 异步 地 展开 。 所 以 ， 在 
异步 任务 队列 中 ，p1 的 回调 排 在 p2 的 回调 之 后 (参见 1.5 市 )。 























要 避免 这 样 的 细微 区 别 带 来 的 赴 梦 ， 你 永远 都 不 应 该 依赖 于 不 同 Promise 间 回 调 的 顺序 和 
调度 。 实 际 上 ， 好 的 编码 实践 方案 根本 不 会 让 多 个 回调 的 顺序 有 丝毫 影响 ， 可 能 的 话 就 要 











3.3.3 回调 未 调用 


这 个 问题 很 常见 ，Promise 可 以 通过 几 种 途径 解决 。 

















首先 ， 没 有 任何 东西 (其 至 JavaScript 错误 ) 能 阻止 Promise 向 你 通知 它 的 决议 〈 如 果 它 
决议 了 的 话 )。 如 果 你 对 一 个 Promise 注册 了 一 个 完成 回调 和 一 个 拒绝 回调 ， 那 么 Promise 
在 决议 时 总 是 会 调用 其 中 的 一 个 。 























当然 ， 如 果 你 的 回调 函数 本 身 包含 JavaScript 错误 ， 那 可 能 就 会 看 不 到 你 期 望 的 结果 ， 但 
实际 上 回调 还 是 被 调用 了 。 后 面 我 们 会 介绍 如 何在 回调 出 错时 得 到 通知 ， 因 为 就 连 这 些 错 
误 也 不 会 被 吞 掉 。 




















但 是 ， 如 果 Promise 本 身 永远 不 被 决议 呢 ? 即使 这 样 ，Promise 也 提供 了 解决 方案 ， 其 使 用 
了 一 种 称 为 竞 态 的 高 级 抽象 机 制 |: 


// 用 于 超时 一 个 Promise 的 工具 
function timeoutPromise(delay) { 

return new Promise( function(resolve,reject){ 
setTimeout( function(){ 

reject( "Timeout!" ); 
}, delay ); 
} ); 




















} 
// 设置 foo() 超 时 


Promise.race( [ 














foo( ) ， // 试 着 开始 foo( ) 
timeoutPromise( 3000 ) // 给 它 3 秒 钟 
] -3 
.then( 
function(){ 
// foo(..) 及 时 完成 ! 
]， 





function(err){ 
// 或 者 foo() 被 拒绝 ,或 者 只 是 没 能 按时 完成 
// 查看 err 来 了 解 是 哪 种 情况 








六 
关于 这 个 Promise 超时 模式 还 有 更 多 细节 需要 考量 ， 后 面 我 们 会 深入 讨论 。 
很 重要 的 一 点 是 ， 我 们 可 以 保证 一 个 foo() 有 一 个 输出 信号 ， 防 止 其 永久 挂 住 程序 。 


























3.3.4 调用 次 数 过 少 或 过 多 

根据 定义 ， 回 调 被 调用 的 正确 次 数 应 该 是 1。“ 过 少 ” 的 情况 就 是 调用 0 次 ， 和 前 面 解释 过 
的 “未 被 ”调用 是 同一 种 情况 。 

“过 多 ”的 情况 很 容易 解释 。Promise 的 定义 方式 使 得 它 只 能 被 决议 一 次 。 如 果 出 于 某 种 
原因 ，Promise 创建 代码 试图 调用 resoLve(..) 或 reject(..) 多 次 ， 或 者 试图 两 者 都 调用 ， 
那么 这 个 Promise 将 只 会 接受 第 一 次 决议 ， 并 默默 地 名 略 任何 后 续 调 用 。 























由 于 Promise 只 能 被 决议 一 次 ， 所 以 任何 通过 then(..) 注册 的 〈 每 个 ) 回调 就 只 会 被 调 
用 一 次 。 





当然 ， 如 果 你 把 同一 个 回调 注册 了 不 止 一 次 (比如 p.then(f); p.then(f);)， 那 它 被 调用 
的 次 数 就 会 和 注册 次 数 相 同 。 响 应 国 数 只 会 被 调用 一 次 ， 但 这 个 保证 并 不 能 预防 你 搬 起 石 
头 砸 自己 的 脚 。 


3.3.5 ”未 能 传递 参数 / 环境 值 
Promise 至 多 只 能 有 一 个 决议 值 (完成 或 拒绝 )。 














如 果 你 没有 用 任何 值 显 式 决议 ， 那 么 这 个 值 就 是 undefined， 这 是 JavaScript 常见 的 处 理 方 
式 。 但 不 管 这 个 值 是 什么 ， 无 论 当 前 或 未 来 ， 它 都 会 被 传 给 所 有 注册 的 〈 且 适当 的 完成 或 
拒绝 ) 回调 。 


还 有 一 点 需要 清楚 : 如 果 使 用 多 个 参数 调用 resovle(..) 或 者 reject(..)， 第 一 个 参数 之 
后 的 所 有 参数 都 会 被 默默 忽略 。 这 看 起 来 似乎 违背 了 我 们 前 面 介绍 的 保证 ， 但 实际 上 并 没 
有 ， 因 为 这 是 对 Promise 机 制 的 无 效 使 用 。 对 于 这 组 API 的 其 他 无 效 使 用 〈 比 如 多 次 重复 
调用 resolve(..))， 也 是 类 似 的 保护 处 理 ， 所 以 这 里 的 Promise 行为 是 一 致 的 〈 如 果 不 是 
有 点 令 人 诅 丧 的 话 )。 


如 果 要 传递 多 个 值 ， 你 就 必须 要 把 它们 封装 在 单个 值 中 传递 ， 比 如 通过 一 个 数组 或 对 象 。 









































对 环境 来 说 ，JavaScript 中 的 函数 总 是 保持 其 定义 所 在 的 作用 域 的 闭 包 (参见 《你 不 知道 
的 JavaScript (上 卷 )》 的 “作用 域 和 闲 包 ”部 分 )， 所 以 它们 当然 可 以 继续 访问 你 提供 的 
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环境 状态 。 当 然 ， 对 于 只 用 回调 的 设计 也 是 这 样 


因此 这 并 不 是 Promise 特有 的 优点 一 一 














但 不 管 怎样 ， 这 仍 是 我 们 可 以 依靠 的 一 个 保证 。 


3.3.6 ” 知 掉 错误 或 异常 
基本 上 ， 这 部 分 是 上 个 要 点 的 再 次 说 明 。 如 果 拒 绝 一 个 Promise 并 给 出 一 个 理由 (也 就 是 


一 个 出 错 消 息 )， 这 个 值 就 会 被 传 给 拒绝 





调 。 





回 


不 过 在 这 里 还 有 更 多 的 细节 需要 研究 。 如 果 在 Promise 的 创建 过 程 中 或 在 查看 其 决议 























结果 过 程 中 的 任何 时 间 点 上 出 现 了 一 个 JavaScript 异常 错误 ， 比 如 一 个 TypeError 或 
ReferenceError， 那 这 个 异常 就 会 被 捕捉 ， 并 且 会 使 这 个 Promise 被 拒绝 。 


举例 来 说 : 





var p = new Promise( function(resolve,reject){ 
foo.bar(); // foo 未 定义 ,所 以 会 出 错 ! 
resolve( 42 ); // 永远 不 会 到 达 这 里 :( 
}); 





p.then( 
function fulfilled(){ 
// 永远 不 会 到 达 这 里 :( 
function rejected(err){ 
// err 将 会 是 一 个 TypeError 异 常 对 象 来 自 foo.bar() 这 一 行 
} 
); 


foo.bar() 中 发 生 的 JavaScript 异常 导致 了 Promise 拒绝 ， 你 可 以 捕捉 并 对 其 作出 响应 。 


这 是 一 个 重要 的 细节 ， 因 为 其 有 效 解决 了 另外 一 个 潜在 的 Zalgo 风险 ， 即 出 错 可 能 会 引起 
同步 响应 ， 而 不 出 错 则 会 是 异步 的 。Promise 甚至 把 JavaScript 异常 也 变 成 了 异步 行为 ， 进 
而 极 大 降低 了 竞 态 条 件 出 现 的 可 能 。 


但 是 ， 如 果 Promise 完成 后 在 查看 结果 时 (then(..) 注册 的 回调 中 ) 出 现 了 JavaScript 异 


常 错 误会 怎样 呢 ? 即 使 这 些 异 常 不 会 被 丢弃 ， 但 你 会 发 现 ， 对 它们 的 处 理 方式 还 是 有 点 出 





























平 意 料 ， 需 要 进行 一 些 深入 研究 才能 理解 : 





var p = new Promise( function(resolve,reject){ 
resoLve( 42 ); 
3 


p.then( 
function fulfilled(msg){ 
foo.bar(); 
console.log( msg ); // 永远 不 会 到 达 这 里 :( 
]， 


function rejected(err){ 














// 永远 也 不 会 到 达 这 里 :( 








); 
等 一 下 ， 这 看 起 来 像 是 foo.bar() 产生 的 异常 真 的 被 否 掉 了 。 别 担心 ， 实 际 上 并 不 是 这 样 。 
但 是 这 里 有 一 个 深 藏 的 问题 ， 就 是 我 们 没有 侦 昕 到 它 。p.then(..) 调用 本 身 返 回 了 另外 一 
个 promise， 正 是 这 个 promise 将 会 因 TypeError 异常 而 被 拒绝 。 




















为 什么 它 不 是 简单 地 调用 我 们 定义 的 错误 处 理 函 数 呢 ? 表面 上 的 逻辑 应 该 是 这 样 啊 。 如 果 
这 样 的 话 就 违背 了 Promise 的 一 条 基本 原则 ， 即 Promise 一 旦 决议 就 不 可 再 变 。p 已 经 完成 
为 值 42， 所 以 之 后 查看 p 的 决议 时 ， 并 不 能 因为 出 错 就 把 p 再 变 为 一 个 拒绝 。 
除了 违背 原则 之 外 ， 这 样 的 行为 也 会 造成 严重 的 损害 。 因 为 假如 这 个 promise p 有 多 个 
then(..) 注册 的 回调 的 话 ， 有 些 回调 会 被 调用 ， 而 有 些 则 不 会 ， 情 况 会 非常 不 透明 ， 难 以 
解释 。 






































3.3.7 ”是 可 信任 的 Promise 吗 

基于 Promise 模式 建立 信任 还 有 最 后 一 个 细节 需要 讨论 。 

你 肯定 已 经 注意 到 Promise 并 没有 完全 摆脱 回调 。 它 们 只 是 改变 了 传递 回调 的 位 置 。 我 
们 并 不 是 把 回调 传递 给 foo(..)， 而 是 从 foo(..) 得 到 某 个 东西 (外观 上 看 是 一 个 真正 的 
Promise) ， 然 后 把 回调 传 给 这 个 东西 。 








但 是 ， 为 什么 这 就 比 单纯 使 用 回调 更 值得 信任 呢 ? 如 何 能 够 确定 返回 的 这 个 东西 实际 上 就 
是 一 个 可 信任 的 Promise 呢 ? 这 难道 不 是 一 个 (脆弱 的 ) 纸牌 屋 ， 在 里 面具 能 信任 我 们 已 
经 信任 的 ? 























关于 Promise 的 很 重要 但 是 常常 被 名 上 略 的 一 个 细节 是 ，Promise 对 这 个 问题 已 经 有 一 个 解决 
方案 。 包 含 在 原生 ES6 Promise 实现 中 的 解决 方案 就 是 Promise.resolve(..)。 





如 果 向 Promise.resolve(..) 传递 一 个 非 Promise、 非 thenable 的 立即 值 ， 就 会 得 到 一 个 用 
这 个 值 填充 的 promise。 下 面 这 种 情况 下 ，promise pl 和 promise p2 的 行为 是 完全 一 样 的 : 





var pl = new Promise( function(resolve,reject){ 
resoLve( 42 ); 
中 3 


var p2 = Promise.resolve( 42 ); 

















而 如 果 向 Promise.resolve(..) 传递 一 个 真正 的 Promise， 就 只 会 返回 同一 个 promise: 
var pl = Promise.resolve( 42 ); 


var p2 = Promise.resoLve( pl ); 
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p1 === p2; // true 


更 重要 的 是 ， 如 果 向 Promise.resolvel..) 传递 了 一 个 非 Promise 的 thenable 值 ， 前 者 就 会 


试图 展开 这 个 值 ， 而 且 展 开 过 程 会 持续 到 提取 出 一 个 具体 的 非 类 Promise 的 最 终 值 。 




















考虑 : 
var p={ 
then: function(cb) { 
cb( 42 ); 
} 
二 











// 这 可 以 工作 ,但 只 是 因为 幸运 而 已 
p 


.then( 
function fulfilled(val){ 
console.log( val ); // 42 


中 
function rejected(err){ 
// 永远 不 会 到 达 这 里 
9 
这 个 p 是 一 个 thenable， 但 并 不 是 一 个 真正 的 Promise。 才 运 的 是 ， 和 绝 大 多 数值 一 样 ， 它 
是 可 追踪 的 。 但 是 ， 如 果 得 到 的 是 如 下 这 样 的 值 又 会 怎样 呢 : 




















var p={ 
then: function(cb,errcb) { 
cb( 42 ); 
errcb( "evil laugh" ); 
} 
}; 
p 
.then( 
function fulfilled(val){ 
console.log( val ); // 42 
}, 
function rejected(err){ 
// 啊 , 不 应 该 运行 ! 
console.log( err ); // 卯 恶 的 笑 
} 
); 
这 个 p 是 一 个 thenable， 但 是 其 行为 和 promise 并 不 完全 一 致 。 这 是 恶意 的 吗 ? 还 只 是 因为 








它 不 知道 Promise 应 该 如 何 运作 ? 说 实话 ， 这 并 不 重要 。 不 管 是 哪 种 情况 ， 它 都 是 不 可 信 
任 的 。 
尽管 如 此 ， 我 们 还 是 都 可 以 把 这 些 版 本 的 p 传 给 Promise.resotve(..)， 然 后 就 会 得 到 期 户 
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中 的 规范 化 后 的 安全 结果 : 


Promise.resolve( p ) 
.then( 
function fulfilled(val){ 
console.log( val ); // 42 
]， 


function rejected(err){ 
// 永远 不 会 到 达 这 里 


2 


Promise.resolve(..) 可 以 接受 任何 thenable， 将 其 解 封 为 它 的 非 thenable 值 。 从 Promise. 
resolve(..) 得 到 的 是 一 个 真正 的 Promise， 是 一 个 可 以 信任 的 值 。 如 果 你 传 入 的 已 经 是 真 
正 的 Promise， 那 么 你 得 到 的 就 是 它 本 身 ， 所 以 通过 Promise.resolve(..) 过 滤 来 获得 可 信 
任性 完全 没有 坏处 。 


假设 我 们 要 调用 一 个 工具 foo(..)， 且 并 不 确定 得 到 的 返回 值 是 否 是 一 个 可 信任 的 行为 良 
好 的 Promise， 但 我 们 可 以 知道 它 至 少 是 一 个 thenable。Promise.resolve(..) 提供 了 可 信 
任 的 Promise 封装 工具 ， 可 以 链接 使 用 : 








// 不 要 只 是 这 么 做 : 

foo( 42 ) 

.then( function(v){ 
console.log( v ); 


a 
// 而 要 这 么 做 : 


Promise.resolve( foo( 42 ) ) 
.then( function(v){ 
console.log( v ); 


} ); 


对 于 用 Promise.resolve(..) 为 所 有 函数 的 返回 值 (不 管 是 不 是 thenable) 
都 封装 一 层 。 另 一 个 好 处 是 ， 这 样 做 很 容易 把 函数 调用 规范 为 定义 良好 的 异 
步 任 务 。 如 果 foo(42) 有 时 会 返回 一 个 立即 值 ， 有 时 会 返回 Promise， 那 么 
Promise.resolve( foo(42) ) 就 能 够 保证 总 会 返回 一 个 Promise 结果 。 而 且 
避免 Zalgo 就 能 得 到 更 好 的 代码 。 














3.3.8 建立 信任 

很 可 能 前 面 的 讨论 现在 已 经 完全 “解决 ”(resolve， 英 语 中 也 表示 “决议 ”的 意思 ) 了 你 的 
疑惑 ，Promise 为 什么 是 可 信任 的 ， 以 及 更 重要 的 ， 为 什么 对 构建 健壮 可 维护 的 软件 来 说 ， 
这 种 信任 非常 重要 。 




















可 以 用 JavaScript 编写 异步 代码 而 无 需 信 任 吗 ? 当然 可 以 。JavaScript 开发 者 近 二 十 年 来 一 





Promise | 197 


直 都 只 用 回调 编写 异步 代码 。 











可 一 旦 开始 思考 你 在 其 上 构建 代码 的 机 制 具有 何 种 程度 的 可 预见 性 和 可 靠 性 时 ， 你 就 会 开 
意识 到 回调 的 可 信任 基础 是 相当 不 牢靠 。 








Promise 这 种 模式 通过 可 信任 








的 语义 把 回调 作为 参数 传递 ， 使 得 这 种 行为 更 可 靠 更 合理 。 





通过 把 回调 的 控制 反 转 反 转 回来 ， 我 们 把 控制 权 放 在 了 一 个 可 信任 的 系统 (Promise) 中 ， 
这 种 系统 的 设计 目的 就 是 为 了 使 异步 编码 更 清晰 。 


3.4 链 式 流 





尽管 我 们 之 前 对 此 有 过 几 次 上 暗示， 但 Promise 并 不 只 是 一 个 单 步 执行 this-then-that 操作 的 


机 制 。 当 然 ， 那 是 构成 部 件 ， 





但 是 我 们 可 以 把 多 个 Promise 连接 到 一 起 以 表示 一 系列 异步 


这 种 方式 可 以 实现 的 关键 在 于 以 下 两 个 Promise 固有 行为 特性 : 





。 每 次 你 对 Promise 调用 then(..)， 它 都 会 创建 并 返回 一 个 新 的 Promise， 我 们 可 以 将 其 


链接 起 来 ， 





。 不 管 从 then(..) 调用 的 完成 回调 (第 一 个 参数 ) 返回 的 值 是 什么 ， 它 都 会 被 自动 设置 


为 被 链接 Promise (第 一 点 


先 来 解释 一 下 这 是 什么 意思 ， 
如 下 代码 : 


中 的 ) 的 完成 。 














然后 推导 一 下 其 如 何 帮 助 我 们 创建 流程 控制 异步 序列 。 考 虑 





var p = Promise.resolve( 21 ); 


var p2 = p.then( function(v){ 
console.log( v ); // 21 

















// 用 值 42 填 充 p2 


return V * 2; 


下 


// 连接 p2 
p2.then( function(v){ 
console.log( v ); // 42 


J 


我 们 通过 返回 v * 2( 即 42)， 完 成 了 第 一 个 调用 then(..) 创建 并 返回 的 promise p2。pz2 的 
then(..) 调用 在 运行 时 会 从 return v * 2 语句 接受 完成 值 。 当 然 ，p2.then(..) 又 创建 了 


另 一 个 新 的 promise， 可 以 用 变量 p3 存储 。 
































但 是 ， 如 果 必 须 创 建 一 个 临时 变量 p2 (或 p3 等 )， 还 是 有 一 点 麻烦 的 。 谢 天 谢 地 ， 我 们 很 
容易 把 这 些 链接 到 一 起 : 
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var p = Promise.resolve( 21 ); 

p 

.then( function(v){ 
console.log( v ); /7/21 


// 用 值 42 完 成 连接 的 promise 


return V * 2; 





}) 

// 这 里 是 链接 的 promise 

.then( function(v){ 
console.log( v ); // 42 

} ); 


现在 第 一 个 then(..) 就 是 异步 序列 中 的 第 一 步 ， 第 二 个 then(..) 就 是 第 二 步 。 这 可 以 一 
直 任 意 扩展 下 去 。 只 要 保持 把 先前 的 then(..) 连 到 自动 创建 的 每 一 个 Promise 即 可 。 


但 这 里 还 漏 掉 了 一 些 东 西 。 ee 等 待 步骤 1 异步 来 完成 一 些 事情 怎么 办 ? 我 们 
使 用 了 立即 返回 return 语句 ， 这 会 立即 完成 链接 的 promise。 

















使 Promise 序列 真正 能 够 在 每 一 步 有 异步 能 力 的 关键 是 ， 回 忆 一 下 当 传 递 给 Promise. 
resolve(..) 的 是 一 个 Promise 或 thenable 而 不 是 最 终 值 时 的 运作 方式 。Promise. 
resolve(..) 会 直接 返回 接收 到 的 真正 Promise， 或 展开 接收 到 的 thenable 值 ， 并 在 持续 展 
开 thenable 的 同时 递归 地 前 进 。 











从 完成 (或 拒绝 ) 处 理 函 数 返 回 thenable 或 者 Promise 的 时 候 也 会 发 生 同 样 的 展开 。 考 虑 ， 





var p = Promise.resolve( 21 ); 


p.then( function(v){ 
console.log( v ); 11 321 








// 创建 一 个 promise 并 将 其 返 区 
return new Promise( function(resolve,reject){ 


// 用 值 42 填 充 
resolve( v * 2 ); 
} 
二 
.then( function(v){ 
console.log( v ); // 42 
} ); 


虽然 我 们 把 和 2 封装 到 了 返回 的 promise 中 ， 但 它 仍然 会 被 展开 并 最 终 成 为 链接 的 promise 
的 决议 ， 因 此 第 二 个 then(..) 得 到 的 仍然 是 42。 如 果 我 们 向 封装 的 promise 引入 异步 ， 一 
切 都 仍然 会 同样 工作 : 


















































var p = Promise.resolve( 21 ); 


p.then( function(v){ 
console.log( v ); // 21 
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// 创建 一 个 promise 并 返 区 











return new Promise( function(resolve,reject){ 


// 引入 异步 ! 


setTimeout( function(){ 
// 用 值 42 填 充 
resolve( Vv * 2 ); 
}, 100 ); 
下 :六 


2) 
.then( function(v){ 
// 在 前 一 步 中 的 109ms 延 迟 之 后 运行 
console.log( v ); // 42 
3 


这 种 强大 实在 不 可 思议 ! 现在 我 们 可 以 构建 这 样 一 个 序列 : 不 管 我 们 想 要 多 少 个 异步 步 





又 ， 每 一 步 都 能 够 根据 需要 等 待 下 一 步 〈 或 者 不 等 ! )。 





当然 ， 在 这 些 例子 中 ， 一步 步 传递 的 值 是 可 选 的 。 如 果 不 显 式 返 回 一 个 值 ， 就 会 隐 式 返回 





undefined， 并 且 这 些 promise 仍然 会 以 同样 的 方式 链接 丰 


议 就 成 了 继续 下 一 个 步骤 的 信号 。 


FE 一 起 。 这 样 








? 


/A— 


每 


个 Promise 的 决 


为 了 进一步 阐释 链接 ， 让 我 们 把 延迟 Promise 创建 (没有 决议 消息 ) 过 程 一 般 化 到 一 个 工 


有 具 中 ， 以 便 在 多 个 步骤 中 复 用 : 


function delay(time) { 


return new Promise( function(resolve,reject){ 


setTimeout( resolve, time ); 
} 3 
} 


delay( 100 ) // 步 又 1 
.then( function STEP2(){ 


console.log( "step 2 (after 100ms)" ); 


return delay( 200 ); 


二 
.then( function STEP3(){ 


console.log( "step 3 (after another 200ms)" ); 


La 
.then( function STEP4(){ 


console.log( "step 4 (next Job)" ); 


return delay( 50 ); 


}) 
.then( function STEP5(){ 


console.log( "step 5 (after another 50ms)” ); 


}) 


调用 delay(269) 创建 了 一 个 将 在 200ms 后 完成 的 promise， 然 后 我 们 从 第 一 个 then(..) 完成 
回调 中 返回 这 个 promise， 这 会 导致 第 二 个 then(..) 的 promise 等 待 这 个 200ms 的 promise。 
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如 前 所 述 ， 严 格 地 说 ， 这 个 交互 过 程 中 有 两 个 promise: 200ms 延迟 promise， 
和 第 二 个 then(. .) 链接 到 的 那个 链接 promise。 但 是 你 可 能 已 经 发 现 了 , 在 
脑海 中 把 这 两 个 promise 合 二 为 一 之 后 更 好 理解 ， 因 为 Promise 机 制 已 经 自 
动 为 你 把 它们 的 状态 合并 在 了 一 起 。 这 样 一 来 ， 可 以 把 return deLay(200) 
看 作 是 创建 了 一 个 promise， 并 用 其 替换 了 前 面 返回 的 链接 promise。 




















但 说 实话 ， 没 有 消息 传递 的 延迟 序列 对 于 Promise 流程 控制 来 说 并 不 是 一 个 很 有 用 的 示例 。 
我 们 来 考虑 如 下 这 样 一 个 更 实际 的 场景 。 


这 里 不 用 定时 器 ， 而 是 构造 Ajax 请 求 : 
// 假定 工具 ajax( {url}，{callback} ) 存 在 


// Promise-aware ajax 
function request(url) { 
return new Promise( function(resolve,reject){ 
// ajax(..) 回 调 应 该 是 我 们 这 个 promise 的 resolve(..) 函 数 
ajax( url, resolve ); 
}); 
} 


我 们 首先 定义 一 个 工具 request(..)， 用 来 构造 一 个 表示 ajax(..) 调用 完成 的 promise: 





request( "http://some.url.1/" ) 
.then( function(response1){ 
return request( "http://some.url.2/?v=" + responsel ); 
}) 
.then( function(response2){ 
console.log( response2 ); 


}); 


开发 者 常会 遇 到 这 样 的 情况 : 他 们 想 要 通过 本 身 并 不 支持 Promise 的 工具 
(就 像 这 里 的 ajax(..)， 它 接收 的 是 一 个 回调 ) 实现 支持 Promise 的 异步 流 
程控 制 。 虽 然 原生 ES6 Promise 机 制 并 不 会 自动 为 我 们 提供 这 个 模式 ， 但 所 
有 实际 的 Promise 库 都 会 提供 。 通 常 它们 把 这 个 过 程 称 为 “提升 ” “promise 
化 ”或 者 其 他 类 似 的 名 称 。 我 们 稍 后 会 再 介绍 这 种 技术 。 



































利用 返回 Promise 的 request(..)， 我 们 通过 使 用 第 一 个 URL 调用 它 来 创建 链接 中 的 第 一 
步 ， 并 且 把 返回 的 promise 与 第 一 个 then(. .) 链接 起 来 。 








response1 一 返回 ， 我 们 就 使 用 这 个 值 构造 第 二 个 URL， 并 发 出 第 二 个 request(..) 调用 。 
第 二 个 request(..) 的 promise 返回 ， 以 便 异 步 流 控制 中 的 第 三 步 等 待 这 个 Ajax 调用 完成 。 
最 后 ，responsez2 一 返回 ， 我 们 就 立即 打出 结果 。 


我 们 构建 的 这 个 Promise 链 不 仅 是 一 个 表达 多 步 异 步 序列 的 流程 控制 ， 还 是 一 个 从 一 个 步 
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又 到 下 一 个 步骤 传递 消息 的 消息 通道 。 


如 果 这 个 Promise 链 中 的 革 个 步骤 出 错 了 怎么 办 ? 错误 和 异常 是 基于 每 个 Promise 的 ， 这 
意味 着 可 能 在 链 的 任意 位 置 捕捉 到 这 样 的 错误 ， 而 这 个 捕捉 动作 在 某 种 程度 上 就 相当 于 在 
这 一 位 置 将 整 条 链 “ 重 置 ” 回 了 正常 运作 : 























// 步骤 1; 
request( "http://some.url.1/" ) 


// 步骤 2， 
.then( function(response1){ 
foo.bar(); // undefined, 出 错 ! 





// 永远 不 会 到 达 这 里 
return request( "http://some.url.2/?v=" + responsel ); 


}) 


// 步 又 3: 
.then( 
function fulfilled(response2){ 
// 永远 不 会 到 达 这 里 


了 


// 捕捉 错误 的 拒绝 处 理 函 数 
function rejected(err){ 
console.log( err ); 


// 来 自 foo.bar() 的 错误 TypeError 
return 42; 








) 
// 步骤 4， 


.then( function(msg){ 
console.log( msg ); // 42 
} ); 


















































第 2 步 出 错 后 ， 第 3 步 的 拒绝 处 理 函 数 会 捕 提 到 这 个 错误 。 拒 绝 处 理 函 数 的 返回 值 ( 这 段 
代码 中 是 42) ， 如 果 有 的 话 ， 会 用 来 完成 交 给 下 一 个 步骤 (第 4 步 ) 的 promise， 这样， 这 
个 链 现在 就 回 到 了 完成 状态 。 








正如 之 前 讨论 过 的 ， 当 从 完成 处 理 函 数 返 回 一 个 promise 时 ， 它 会 被 展开 并 
有 可 能 延迟 下 一 个 步骤 。 从 拒绝 处 理 函 数 返 回 promise 也 是 如 此 ， 因 此 如 果 
在 第 3 步 返 回 的 不 是 42 而 是 一 个 promise 的 话 ， 这 个 promise 可 能 会 延迟 第 
4 步 。 调 用 then(..) 时 的 完成 处 理 函数 或 拒绝 处 理 函 数 如 果 抛 出 异常 ， 都 会 
导致 〈 链 中 的 ) 下 一 个 promise 因 这 个 异常 而 立即 被 拒绝 。 













































































如 果 你 调用 promise 的 then(..)， 并且 只 传 入 一 个 完成 处 理 函 数 ， 一 个 默认 拒绝 处 理 函 数 
就 会 顶替 上 来 : 
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| 


到 





Var 


] ); 


Var 


) 





p = new Promise( function(resolve,reject){ 
reject( "Oops" ); 


p2 = p.then( 
function fulfilled(){ 
// 永远 不 会 达到 这 里 


} 

// 假定 的 拒绝 处 理 函数 ,如 果 省 略 或 者 传 入 任何 非 函 数值 
// function(err) { 

// throw err; 


// } 





如 你 所 见 ， 默 认 拒 绝 处 理 函 数 只 是 把 错误 重新 抛 出 ， 这 最 终 会 使 得 p2 (链接 的 promise) 
用 同样 的 错误 理由 拒绝 。 从 本 质 上 说 ， 这 使 得 错误 可 以 继续 沿 着 Promise 链 传播 下 去 ， 直 
遇 到 显 式 定 义 的 拒绝 处 理 函 数 。 














稍 后 我 们 会 介绍 关于 Promise 错误 处 理 的 更 多 细节 ， 因 为 还 有 其 他 一 些微 妙 
的 细节 需要 考虑 。 








如 有 果 设 有 给 then(..) 传递 一 个 适当 有 效 的 函数 作为 完成 处 理 函数 参数 ， 还 是 会 有 作为 替代 
的 一 个 默认 处 理 函数 : 


Var 





p = Promise.resolve( 42 ); 


p.then( 


3 


// 假设 的 完成 处 理 函数 ,如 果 省 略 或 者 传 入 任何 非 函 数值 
// function(v) { 
// return v; 
//} 
null, 
function rejected(err){ 
// 永远 不 会 到 达 这 里 








你 可 以 看 到 ， 上 默认 的 完成 处 理 函 数 只 是 把 接收 到 的 任何 传 入 值 传 递 给 下 一 个 步骤 
(Promise) 而 已 。 





then(null,function(err){ .. }) 这 个 模式 一 一 只 处 理 拒绝 (如 果 有 的 话 )， 
但 又 把 完成 值 传递 下 去 一 一 有 一 个 缩写 形式 的 API: catch(function(err) 
{ .. })。 下 一 小 节 会 详细 介绍 catch(.. )。 
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让 我 们 来 简单 总 结 一 下 使 链 式 流程 控制 可 行 的 Promise 固有 特性 。 


。 调用 Promise 的 then(..) 会 自动 创建 一 个 新 的 Promise 从 调用 返回 。 

。 在 完成 或 拒绝 处 理 函 数 内 部 ， 如 果 返 回 一 个 值 或 抛 出 一 个 异常 ， 新 返回 的 〈 可 链接 的 ) 
Promise 就 相应 地 决议 。 

。 如 果 完 成 或 拒绝 处 理 函数 返回 一 个 Promise， 它 将 会 被 展开 ， 这 样 一 来 ， 不 管 它 的 决议 
值 是 什么 ， 都 会 成 为 当前 then(..) 返回 的 链接 Promise 的 决议 值 。 


尽管 链 式 流程 控制 是 有 用 的 ， 但 是 对 其 最 精确 的 看 法 是 把 它 看 作 Promise 组 合 到 一 起 的 一 
个 附加 益处 ， 而 不 是 主要 目的 。 正 如 前 面 已 经 多 次 深入 讨论 的 ，Promise 规范 化 了 异步 ， 
并 封装 了 时 间 相 关 值 的 状态 ， 使 得 我 们 能 够 把 它们 以 这 种 有 用 的 方式 链接 到 一 起 。 


当然 ， 相 对 于 第 2 章 讨论 的 回调 的 一 团 乱 麻 ， 链 接 的 顺序 表达 (this-then-this-then-this..….) 
已 经 是 一 个 巨大 的 进步 。 但 是 ,仍然 有 大 量 的 重复 样板 代码 (then(..) 以 及 function() 
{ ... })。 在 第 4 章 ， 我 们 将 会 看 到 在 顺序 流程 控制 表达 方面 提升 巨大 的 优美 模式 ， 通 
过 生成 器 实现 。 


术语 : 决议 、 完 成 以 及 拒绝 
对 于 术语 决议 (resolve)、 完 成 (fulfill) 和 拒绝 (reject) ， 在 更 深入 学 习 Promise 之 前 ， 我 
们 还 有 一 些 模 糊 之 处 需要 澄清 。 先 来 研究 一 下 构造 器 Promitse(..): 
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var p = new Promise( function(X,Y){ 
// X() 用 于 完成 
// Y() 用 于 拒绝 
}); 
你 可 以 看 到 ， 这 里 提供 了 两 个 回调 〈 称 为 X 和 Y)。 第 一 个 通常 用 于 标识 Promise 已 经 完 
成 ， 第 二 个 总 是 用 于 标识 Promise 被 拒绝 。 这 个 “通常 ”是 什么 意思 呢 ? 对 于 这 些 参数 的 
精确 命名 ， 这 又 意味 着 什么 呢 ? 


追根 究 底 ， 这 只 是 你 的 用 户 代 码 和 标识 符 名 称 ， 对 引擎 而 言 没有 意义 。 所 以 从 技术 上 说 ， 
这 无 关 紧 要 ，foo(..) 或 者 bar(..) 还 是 同样 的 函数 。 但 是 ， 你 使 用 的 文字 不 只 会 影响 你 对 
这 些 代码 的 看 法 ， 也 会 影响 团队 其 他 开发 者 对 代码 的 认识 。 错 误 理 解 精 心 组 织 起 来 的 异步 
代码 还 不 如 使 用 一 团 乱 麻 的 回调 函数 。 


所 以 事实 上 ， 命 名 还 是 有 一 定 的 重要 性 的 。 


第 二 个 参数 名 称 很 容易 决定 。 几 乎 所 有 的 文献 都 将 其 命名 为 reject(..)， 因 为 这 就 是 它 真 
实 的 (也 是 唯一 的 ! ) 工作 ， 所 以 这 样 的 名 字 是 很 好 的 选择 。 我 强烈 建议 大 家 要 一 直 使 用 


reject(..) 这 一 名 称 。 












































但 是 ， 第 一 个 参数 就 有 一 些 模糊 了 ，Promise 文献 通常 将 其 称 为 resotve(..)。 这 个 词 显然 
和 决议 (resolution) 有 关 ， 而 决议 在 各 种 文献 (包括 本 书 ) 中 是 用 来 描述 “为 Promise 设 
定 最 终 值 / 状态 ”。 前 面 我 们 已 经 多 次 使 用 “Promise 决议 ”来 表示 完成 或 拒绝 Promise。 
但 是 ， 如 果 这 个 参数 是 用 来 特 指 完成 这 个 Promise， 那 为 什么 不 用 使 用 fuLfiLL(..) 来 代 赫 
resolve(..) 以 求 表达 更 精确 呢 ? 要 回答 这 个 问题 ， 我 们 先 来 看 看 两 个 Promise API 方法 : 


var fulfilledPr = Promise.resolve( 42 ); 


var rejectedPr = Promise.reject( "Oops" ); 


Promise.resolve(..) 创建 了 一 个 决议 为 输入 值 的 Promise。 在 这 个 例子 中 ，42 是 一 个 非 
Promise、 非 thenable 的 普通 值 ， 所 以 完成 后 的 promise fullfilledPr 是 为 值 42 创建 的 。 
Promise.reject("0ops") 创建 了 一 个 被 拒绝 的 promise rejectedPr， 拒 绝 理由 为 "0ops"。 





现在 我 们 来 解释 为 什么 单词 resolve (比如 在 Promise.resolve(..) 中 ) 如 果 用 于 表达 结果 
可 能 是 完成 也 可 能 是 拒绝 的 话 ， 既 没有 歧义 ， 而 且 也 确实 更 精确 : 








var rejectedTh = { 
then: function(resolved,rejected) { 
rejected( "Oops" ); 
} 
}; 


var rejectedPr = Promise.resolve( rejectedTh ); 
本 章 前 面 已 经 介绍 过 ，Promise.resolve(..) 会 将 传人 的 真正 Promise 直接 返回 ， 对 传 


入 的 thenable 则 会 展开 。 如 果 这 个 thenable 展开 得 到 一 个 拒绝 状态 ， 那 么 从 Promise. 
resolve(..) 返回 的 Promise 实际 上 就 是 这 同一 个 拒绝 状态 。 








所 以 对 这 个 API 方法 来 说 ，Promise.resolvel..) 是 一 个 精确 的 好 名 字 ， 因 为 它 实际 上 的 结 
有 果 可 能 是 完成 或 拒绝 。 











Promise(..) 构造 器 的 第 一 个 参数 回调 会 展开 thenable (和 Promise.resolve(..) 一 样 ) 或 
真正 的 Promise: 








var rejectedPr = new Promise( function(resolve,reject){ 
// 用 一 个 被 拒绝 的 promise 完 成 这 个 promise 
resolve( Promise.reject( "O00ops" ) ); 


PS 








rejectedPr .then( 
function fulfilled(){ 
// 永远 不 会 到 达 这 里 
]， 
function rejected(err){ 
console.log( err ); // "0ops" 
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} 
»3 


现在 应 该 很 清楚 了 ，pPromise(..) 构造 器 的 第 一 个 回调 参数 的 恰当 称谓 是 resoLve(..)。 

















前 面 提 到 的 reject(..) 不 会 像 resolve(..) 一 样 进行 展开 。 如 果 问 
reject(..) 传人 一 个 Promise/thenable 值 ， 它 会 把 这 个 值 原封 不 动 地 设置 为 
拒绝 理由 。 后 续 的 拒绝 处 理 函 数 接收 到 的 是 你 实际 传 给 reject(..) 的 那个 
Promise/thenable， 而 不 是 其 底层 的 立即 值 。 











不 过 ， 现 在 我 们 再 来 关注 一 下 提供 给 then(. .) 的 回调 。 它 们 (在 文献 和 代码 中 ) 应 该 怎么 
命名 呢 ? 我 的 建议 是 fulfilled(..) 和 rejected(..): 
function fulfilled(msg) { 


console.log( msg ); 


} 


function rejected(err) { 
console.error( err ); 


} 

p.then( 
fulfilled, 
rejected 


)3 
对 then(..) 的 第 一 个 参数 来 说 ， 毫 无 疑义 ， 总 是 处 理 完 成 的 情况 ， 所 以 不 需要 使 用 标识 两 
种 状态 的 术语 “resolve" 。 这 里 提 一 下 ，ES6 规范 将 这 两 个 回调 命名 为 onFulfilled(..) 和 
onRjected(..)， 所 以 这 两 个 术语 很 准确 。 


3.5 ”错误 处 理 

前 面 已 经 展示 了 一 些 例子 ， 用 于 说 明 在 异步 编程 中 Promise 拒绝 (调用 reject(..) 有 意 拒 
绝 或 JavaScript 异常 导致 的 无 意 拒绝 ) 如 何 使 得 错误 处 理 更 完善 。 我 们 来 回顾 一 下 ， 并 明 
确 解释 一 下 前 面 没 有 明说 的 几 个 细节 。 

对 多 数 开发 者 来 说 ， 错 误 处 理 最 自然 的 形式 就 是 同步 的 try. .catch 结构 。 遗 憾 的 是 ， 它 只 
能 是 同步 的 ， 无 法 用 于 异步 代码 模式 : 














function foo() { 
setTimeout( function(){ 
baz.bar(); 
}, 100 ); 
} 


try { 





A 
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foo(); 
// 后 面 从 “baz.bar()” 抛 日 





H 全 局 错误 


catch (err) { 
// 永远 不 会 到 达 这 里 


try..catch 当然 很 好 ,但 是 无 法 跨 异步 操作 工作 。 也 就 是 说 ， 还 








些 寡 


需要 一 


持 ， 我 们 会 在 第 4 章 关 于 生成 器 的 部 分 介绍 这 些 环境 支持 。 
在 回调 中 ， 一 些 模式 化 的 错误 处 理 方式 已 经 出 现 ， 最 值得 








function foo(cb) { 
setTimeout( function(){ 


try { 
var x = baz.bar(); 


cb( null, x ); // 成 功 ! 


catch (err) { 
cb( err ); 


}, 100 ); 
} 


foo( function(err,val){ 
if (err) { 
console.error( err ); // 烦 :( 


} 
else { 
console.log( val ); 
} 
$3 





catch 才能 工作 。 如 果 baz.bar() 
步 错误 都 将 无 法 捕捉 到 。 


局 
开 























传 给 foo(..) 的 回调 函数 保留 第 一 个 参数 err， 
话 ， 就 认为 出 错 ， 否 则 就 认为 是 成 功 。 

严格 说 来 ， 类 错误 处 到 

交织 在 A 

















(参见 第 2 章 )。 





日 


Ey A 








我 们 





回 到 Promise 中 的 错误 处 理 








于 完成 情况 ， 一 个 回调 用 于 拒绝 情况 


只 有 在 baz.bar() 调用 会 同步 地 立即 成 功 或 失败 的 情况 下 ， 


里 是 支持 异步 的 ， 但 完全 无 法 很 好 地 组 合 。 
再 加 上 这 些 无 所 不 在 的 if 检查 语句 ， 都 不 可 避免 地 导致 了 


其 中 拒绝 处 理 函 数 被 传递 给 
流行 的 error-first 回调 设计 风格 ， 而 是 使 用 了 分 离 回调 (split-callback) 风格 。 


这 里 的 try.. 
自己 的 异步 完成 函数 ， 其 中 的 任何 





本 身 有 











日 
不 

















用 于 在 出 错时 接收 到 信号 。 如 


多 级 error-first 











给 then( . 


额外 的 环境 支 


一 提 的 是 error-first 回调 风格 : 


其 存在 的 


回调 


回调 地 狱 的 风险 


.)。Promise 没有 采用 
一 个 回调 用 
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var p = Promise.reject( "Oops" ); 


p.then( 
function fulfilled(){ 
// 永远 不 会 到 达 这 里 
function rejected(err){ 
console.log( err ); // "Oops" 
} 





















































尽管 表面 看 来 ， 这 种 出 错 处 理 模 式 很 合理 ， 但 彻底 掌握 Promise 错误 处 理 的 各 种 细微 差别 
常常 还 是 有 些 难度 的 。 











var p = Promise.resolve( 42 ); 


p.then( 
function fulfilled(msg){ 
// 数字 没有 string 国 数 ,所 以 会 抛 出 错误 


console.log( msg.toLowerCase() ); 





}， 


function rejected(err){ 


// 永远 不 会 到 达 这 里 
)3 
如 果 msg.toLowerCase() 合法 地 抛 出 一 个 错误 (事实 确实 如 此 ! )， 为 什么 我 们 的 错误 处 理 
函数 没有 得 到 通知 呢 ?” 正 如 前 面 解释 过 的 ， 这 是 因为 那个 错误 处 理 函 数 是 为 promise p 准 


备 的 ， 而 这 个 promise 已 经 用 值 42 填充 了 。promise p 是 不 可 变 的 ， 所 以 唯一 可 以 被 通知 这 
个 错误 的 promise 是 从 p.then(..) 返回 的 那 一 个 ， 但 我 们 在 此 例 中 没有 捕捉 。 











这 应 该 清晰 地 解释 了 为 什么 Promise 的 错误 处 理 易 于 出 错 。 这 非常 容易 造成 错误 被 吞 掉 ， 
而 这 极 少 是 出 于 你 的 本 意 。 








如 果 通 过 无 效 的 方式 使 用 Promise API， 并 且 出 现 一 个 错误 阻碍 了 正常 
的 Promise 构造 ， 那 么 结果 会 得 到 一 个 立即 抛 出 的 异常 ， 而 不 是 一 个 被 拒 
绝 的 Promise。 这 里 是 一 些 错误 使 用 导致 Promise 构造 失败 的 例子 : new 
Promise(null)、Promise.all()、Promise.race(42)， 等 等 。 如 果 一 开始 你 
就 没 能 有 效 使 用 Promise API 真正 构造 出 一 个 Promise， 那 就 无 法 导 到 一 个 被 
拒绝 的 Promise | 











3.5.1 2 0 


Jeff Atwood 多 年 前 曾 提 出 : 编程 语言 构建 的 方式 是 ， 上 默认 情况 下 ， 开 发 者 陷入 “ 绝 




















望 的 陷阱 ”(pit of despair) (http://blog.codinghorror.com/falling-into-the-pit-of-success)， 要 
为 错误 付出 代价 ， 只 有 更 努力 才能 做 对 。 他 呼吁 我 们 转 而 构建 一 个 “成 功 的 坑 ”(pit of 
success)， 其 中 默认 情况 下 你 能 够 得 到 想 要 的 结果 (成功)， 想 出 错 很 难 。 




















毫 无 疑问 ，Promise 错误 处 理 就 是 一 个 “绝望 的 陷阱 ”设计 。 默 认 情 况 下 ， 它 假定 你 想 要 
Promise 状态 吞 掉 所 有 的 错误 。 如 果 你 忘 了 查看 这 个 状态 ， 这 个 错误 就 会 默默 地 (通常 是 
绝望 地 ) 在 暗 处 凋零 死 掉 。 


为 了 避免 丢失 被 忽略 和 抛弃 的 Promise 错误 ， 一 些 开 发 者 表示 ，Promise 链 的 一 个 最 佳 实践 
就 是 最 后 总 以 一 个 Catch( 。 二 结束 》 比如 : 








var p = Promise.resolve( 42 ); 


p.then( 
function fulfilled(msg){ 
// 数字 没有 string 国 数 ,所 以 会 抛 出 错误 
) 


console.log( msg.toLowerCase() 





} 3 

) 

.Catch( handLeErrors ); 
因为 我 们 没有 为 then(..) 传人 拒绝 处 理 国 数 ， 所 以 默认 的 处 理 函 数 被 替换 掉 了 ， 而 这 仅 
仅 是 把 错误 传递 给 了 链 中 的 下 一 个 promise。 因 此 ， 进 入 p 的 错误 以 及 p 之 后 进入 其 决议 
(就 像 msg.toLowerCase()) 的 错误 都 会 传递 到 最 后 的 handleErrors(..)。 














问题 解决 了 ， 对 吧 ? 没 那么 快 ! 


如 果 handleErrors(..) 本 身 内 部 也 有 错误 怎么 办 呢 ? 谁 来 捕捉 它 ? 还 有 一 个 没 人 处 理 的 
promise: catch(..) 返回 的 那 一 个 。 我 们 没有 捕获 这 个 promise 的 结果 ， 也 没有 为 其 注册 
拒绝 处 理 函数 。 

你 并 不 能 简单 地 在 这 个 链 尾 端 添 加 一 个 新 的 catch(.…)， 因 为 它 很 可 能 会 失败 。 任 何 
Promise 链 的 最 后 一 步 ， 不 管 是 什么 ， 总 是 存在 着 在 未 被 查看 的 Promise 中 出 现 未 捕获 错误 
的 可 能 性 ， 尽 管 这 种 可 能 性 越 来 越 低 。 






















































































看 起 来 好 像 是 个 无 解 的 问题 吧 ? 


3.5.2 ”处 理 未 捕获 的 情况 

这 不 是 一 个 容易 彻底 解决 的 问题 。 还 有 其 他 (很 多 人 认为 是 更 好 的 ) 一 些 处 理 方法 。 

有 些 Promise 库 增加 了 一 些 方法 ， 用 于 注册 一 个 类 似 于 “全 局 未 处 理 拒绝 ”处 理 函 数 的 东 
西 ， 这 样 就 不 会 抛 出 全 局 错误 ， 而 是 调用 这 个 了 国 数 。 但 它们 辨识 未 捕获 错 误 的 方法 是 定义 
一 个 某 个 时 长 的 定时 器 ， 比 如 3 秒 钟 ， 在 拒绝 的 时 刻 启 动 。 如 果 Promise 被 拒绝 ， 而 在 定 
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时 器 触发 之 前 都 没有 错误 处 理 函 数 被 注册 ， 那 它 就 会 假定 你 不 会 注册 处 理 函 数 ， 进 而 就 是 
未 被 捕获 错误 。 




















在 实际 使 用 中 ， 对 很 多 库 来 说 ， 这 种 方法 运行 良好 ， 因 为 通常 多 数 使 用 模式 在 Promise 拒 
绝 和 检查 拒绝 结果 之 间 不 会 有 很 长 的 延迟 。 但 是 这 种 模式 可 能 会 有 些 麻 烦 ， 因 为 3 秒 这 个 
时 间 太 随意 了 (即使 是 经 验 值 )， 也 因为 确实 有 一 些 情况 下 会 需要 Promise 在 一 段 不 确定 的 
时 间 内 保持 其 拒绝 状态 。 而 且 你 绝对 不 希望 因为 这 些 误 报 (还 没 被 处 理 的 未 捕获 错误 ) 而 
调用 未 捕获 错误 处 理 函数 。 














更 常见 的 一 种 看 法 是 : Promsie 应 该 添加 一 个 done(..) 函数 ， 从 本 质 上 标识 Promsie 链 的 
结束 。done(..) 不 会 创建 和 返回 Promise， 所 以 传递 给 done(..) 的 回调 显然 不 会 报告 一 个 
并 不 存在 的 链接 Promise 的 问题 。 























那么 会 发 生 什么 呢 ? 它 的 处 理 方式 类 似 于 你 可 能 对 未 捕获 错误 通常 期 望 的 处 理 方式 : 
done(..) 拒绝 处 理 函 数 内 部 的 任何 异常 都 会 被 作为 一 个 全 局 未 处 理 错误 抛 出 (基本 上 是 在 
开发 者 终端 上 )。 代 码 如 下 : 











var p = Promise.resolve( 42 ); 


p.then( 
function fulfilled(msg){ 
// 数字 没有 string 国 数 ,所 以 会 抛 出 错误 
console.log( msg.toLowerCase() ); 


} 





) 


.done( null, handleErrors ); 
// 如 果 handleErrors(..) 引 发 了 自身 的 异常 ,会 被 全 局 抛 出 到 这 里 


相 比 没有 结束 的 链接 或 者 任意 时 长 的 定时 器 ， 这 种 方案 看 起 来 似乎 更 有 吸引 力 。 但 最 大 的 
问题 是 ， 它 并 不 是 ES6 标准 的 一 部 分 ， 所 以 不 管 昕 起 来 怎么 好 ， 要 成 为 可 靠 的 普遍 解决 方 
案 ， 它 还 有 很 长 一 段 路 要 走 。 


那 我 们 就 这 么 被 卡 住 了 ? 不 完全 是 。 





浏览 器 有 一 个 特有 的 功能 是 我 们 的 代码 所 没有 的 : 它们 可 以 跟踪 并 了 解 所 有 对 象 被 丢弃 以 
及 被 垃圾 回收 的 时 机 。 所 以 ， 浏 览 器 可 以 追踪 Promise 对 象 。 如 果 在 它 被 垃圾 回收 的 时 候 
其 中 有 拒绝 ， 浏 览 器 就 能 够 确保 这 是 一 个 真正 的 未 捕获 错误 ， 进 而 可 以 确定 应 该 将 其 报告 
上 开发 者 终端 。 
































出 


在 编写 本 书 时 候 ，Chrome 和 Firefox 对 于 这 种 (追踪 ) 未 捕获 拒绝 功能 都 已 
经 有 了 早期 的 实验 性 支持 ， 尽 管 还 不 完善 。 





























但 是 ， 如 果 一 个 Promise 未 被 垃圾 回收 一 一 各 种 不 同 的 代码 模式 中 很 容易 不 小 心 出 现 这 种 
情况 一 一 浏览 器 的 垃圾 回收 噢 探 就 无 法 帮助 你 知晓 和 诊断 一 个 被 你 默默 拒绝 的 Promise。 








还 有 其 他 办 法 吗 ? 有 。 


3.5.3 成功 的 坑 

接 下 来 的 内 容 只 是 理论 上 的 ， 关 于 未 来 的 Promise 可 以 变 成 什么 样 。 我 相信 它 会 变 得 比 
现在 我 们 所 拥有 的 高 级 得 多 。 我 认为 这 种 改变 甚至 可 能 是 后 FS6 人 得 它 不 会 
打破 与 ES6 Promise 的 web 兼容 性 。 还 有 ， 如 果 你 认真 对 待 的 话 ， 它 可 能 是 可 以 polyfill/ 
prollyfill 的 。 我 们 来 看 一 下 。 


。 默认 情况 下 ，Promsie 在 下 一 个 任务 或 时 间 循 环 tick 上 (向 开发 者 终端 ) 报告 所 有 拒绝 ， 
如 果 在 这 个 时 间 点 上 该 Promise 上 还 没有 注册 错误 处 理 函 数 。 

# TD Promise 在 查看 之 前 的 某 个 时 间 段 内 保持 被 拒绝 状态 ， 可 以 调用 
defer()， 这 个 函数 优先 级 高 于 该 Promise 的 自动 错误 报告 。 


如 果 一 个 Promise 被 拒绝 的 话 ， 上 默认 情况 下 会 向 开发 者 终端 报告 这 个 事实 (而 不 是 默认 为 
沉默 )。 可 以 选择 隐 式 (在 拒绝 之 前 注册 一 个 错误 处 理 函 数 ) 或 者 显 式 (通过 defer()) 禁 
止 这 种 报告 。 在 这 两 种 情况 下 ， 都 是 由 你 来 控制 误 报 的 情况 。 


考虑 : 












































var p = Promise.reject( "Oops" ).defer(); 


// foo(..) 是 支持 Promise 的 
foo( 42 ) 
.then( 
function fulfilled(){ 
return p; 
让 
function rejected(err){ 


// 处 理 foo(..) 错 误 





} 
); 
创建 p 的 时 候 ， 我 们 知道 需要 等 待 一 段 时 间 才 能 使 用 或 查看 它 的 拒绝 结果 ， 所 以 我 们 就 
调用 defer()， 这 样 就 不 会 有 全 局 报告 出 现 。 为 了 便于 链接 ，defer() 只 是 返回 这 同一 个 


promise 





从 foo(..) 返回 的 promise 立刻 就 被 关联 了 一 个 错误 处 理 函 数 ， 所 以 它 也 隐 式 消除 了 出 错 
全 局 报告 。 


但 是 ， 从 then(..) 调用 返回 的 promise 没有 调用 defer()， 也 没有 关联 错误 处 理 函 数 ， 所 
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以 如 果 它 (从 内 部 或 决议 处 理 函 数 ) 拒绝 的 话 ， 就 会 作为 一 个 未 捕获 错误 被 报告 到 开发 
者 终端 。 

这 种 设计 就 是 成 功 的 坑 。 上 默认 情况 下 ， 所 有 的 错误 要 么 被 处 理 要 么 被 报告 ， 这 几乎 是 绝 大 
多 数 情 况 下 几乎 所 有 开发 者 会 期 望 的 结果 。 你 要 么 必须 注册 一 个 处 理 函 数 要 么 特意 选择 述 
出 ， 并 表明 你 想 把 错误 处 理 延 迟到 将 来 。 你 这 时 候 是 在 为 特殊 情况 主动 承担 特殊 的 责任 。 
这 种 方案 唯一 真正 的 危险 是 ， 如 果 你 defer() 了 一 个 Promise， 但 之 后 却 没 有 成 功 查看 或 处 
理 它 的 拒绝 结果 。 












































但 是 ， 你 得 特意 调用 defer() 才能 选择 进入 这 个 绝望 的 陷阱 (默认 情况 下 总 是 成 功 的 坑 )。 
所 以 这 是 你 自己 的 问题 ， 别 人 也 无 能 为 力 。 

我 认为 Promise 错误 处 理 还 是 有 希望 的 (后 ES6)。 我 希 
虐 一 下 这 种 修改 。 同 时 ， 你 也 可 以 自己 实现 这 一 点 (这 
或 者 选择 更 智能 的 Promise 库 为 实现 ! 











望 权威 组 织 能 够 重新 思考 现状 ， 考 
是 一 道 留 给 大 家 的 挑战 性 习题 ! )， 








这 个 错误 处 理 /报告 的 精确 模板 是 在 我 的 asynquesce Promise 抽象 库 中 实现 
的 。 本 部 分 的 附录 A 中 详细 讨论 了 这 个 库 。 








3.6 ”Promise 模式 


前 文 我 们 无 疑 已 经 看 到 了 使 用 Promise 链 的 顺序 模式 (this-then-this-then-that 流程 控制 ) ， 
但 是 可 以 基于 Promise 构建 的 异步 模式 抽象 还 有 很 多 变 体 。 这 些 模 式 是 为 了 简化 异步 流程 
控制 ， 这 使 得 我 们 的 代码 更 容易 追踪 和 维护 ， 即 使 在 程序 中 最 复杂 的 部 分 也 是 如 此 。 


原生 ES6 Promise 实现 中 直接 支持 了 两 个 这 样 的 模式 ， 所 以 我 们 可 以 免费 得 到 它们 ， 用 作 
构建 其 他 模式 的 基本 块 。 


3.6.1 Promise.all([ .. ]) 


在 异步 序列 中 (Promise 链 ) ， 任 意 时 刻 都 只 能 有 一 个 异步 任务 正在 执行 一 步骤 2 只 能 在 
步骤 1 之后， 步骤 3 只 能 在 步骤 2 之 后 。 但 是 ， 如 果 想 要 同时 执行 两 个 或 更 多 步骤 (也 就 
是 “并 行 执行 ")， 要 怎么 实现 呢 ? 


在 经 典 的 编程 术语 中 ， 门 〈gate) 是 这 样 一 种 机 制 要 等 待 两 个 或 更 多 并 行 /并 发 的 任务 都 
完成 才能 继续 。 它 们 的 完成 顺序 并 不 重要 ， 但 是 必须 都 要 完成 ， 门 才能 打开 并 让 流程 控制 
继续 。 


























在 Promise API 中 ， 这 种 模式 被 称 为 aLL([ .. ])。 





假定 你 想 要 同时 发 送 两 个 Ajax 请 求 ， 等 它们 不 管 以 什么 顺序 全 部 完成 之 后 ， 再 发 送 第 三 
个 Ajax 请 求 。 考 虑 : 


// request(..) 是 一 个 Promise-aware Ajax 工具 


// 就 像 我 们 在 本 章 前 面 定义 的 一 样 





Var pl 
var p2 


= request( "http://some.url.1/" ); 
= request( "http://some.url.2/" ); 
Promise.all( [p1,p2] ) 
.then( function(msgs){ 
// 这 里 ,pl 和 p2 完 成 并 把 它们 的 消息 传 入 
return request( 
"http://some.url.3/?v=" + msgs.join(",") 














); 

}) 

.then( function(msg){ 
console.log( msg ); 


下 


Promise.all([ .. ]) 需要 一 个 参数 ， 是 一 个 数组 ， 通 常 由 Promise 实例 组 成 。 从 Promise. 
all([ .. ]) 调用 返回 的 promise 会 收 到 一 个 完成 消息 (代码 片段 中 的 msg)。 这 是 一 个 由 所 
有 传 入 promise 的 完成 消息 组 成 的 数组 ， 与 指定 的 顺序 一 致 ( 与 完成 顺序 无 关 )。 





严格 说 来 ， 传 给 Promise.all([ .. ]) 的 数组 中 的 值 可 以 是 Promise、 
thenable， 甚 至 是 立即 值 。 就 本 质 而 言 ， 列 表 中 的 每 个 值 都 会 通过 Promise. 
resolve(..) 过 滤 ， 以 确保 要 等 待 的 是 一 个 真正 的 Promise， 所 以 立即 值 会 
被 规范 化 为 为 这 个 值 构建 的 Promise。 如 果 数 组 是 空 的 ， 主 Promise 就 会 立 
即 完成 。 








从 Promise.all([ .. ]) 返回 的 主 promise 在 且 仅 在 所 有 的 成 员 promise 都 完成 后 才 会 完 
成 。 如 果 这 些 promise 中 有 任何 一 个 被 拒绝 的 话 ， 主 Promise.all([ .. ])promise 就 会 立 
即 被 拒绝 ， 并 丢弃 来 自 其 他 所 有 promise 的 全 部 结果 。 














永远 要 记 住 为 每 个 promise 关联 一 个 拒绝 /错误 处 理 函 数 ， 特 别 是 从 Promise.all([ .. ]) 
返回 的 那 一 个 。 








3.6.2 Promise.race([ .. ]) 


尽管 Promise.all([ .. ]) 协调 多 个 并 发 Promise 的 运行 ， 并 假定 所 有 Promise 都 需要 完 
成 ， 但 有 时 候 你 会 想 只 响应 “第 一 个 跨 过 终点 线 的 Promise”， 而 抛弃 其 他 Promise。 


这 种 模式 传统 上 称 为 门 门 ， 但 在 Promise 中 称 为 竞 态 。 
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虽然 “只 有 第 一 个 到 达 终 点 的 才 算 胜利 ”这 个 比喻 很 好 地 描述 了 其 行为 特 
性 ， 但 遗憾 的 是 ， 由 于 竞 态 Se bug (参见 第 1 章 )， 
所 以 从 某 种 程度 上 说 ,“ 竞 争 ” 这 个 词 已 经 是 一 个 具有 固定 意义 的 术语 了 。 
不 要 混淆 了 Promise.race([..]) 和 竞 态 条 件 。 

















Promise.race([ .. ]) 也 接受 单个 数组 参数 。 这 个 数组 由 一 个 或 多 个 Promise、thenable 或 
立即 值 组 成 。 立 即 值 之 间 的 竞争 在 实践 中 没有 太 大 意义 ， 因 为 显然 列表 中 的 第 一 个 会 获 
胜 ， 就 像 赛跑 中 有 一 个 选手 是 从 终点 开始 比赛 一 样 ! 





与 Promise.all([ .. ]) 类 似 ， 一 旦 有 任何 一 个 Promise 决议 为 完成 ，Promise.race([ .. ]) 
就 会 完成 ; 一 旦 有 任何 一 个 Promise 决议 为 拒绝 ， 它 就 会 拒绝 。 





项 竞赛 需要 至 少 一 个 “参赛 者 "”。 所 以 ， 如 果 你 传人 了 一 个 空 数 组 ， 主 
race([..]) Promise 永远 不 会 决议 ， 而 不 是 立即 决议 。 这 很 容易 搬 起 石头 砸 
自己 的 脚 ! ES6 应 该 指定 它 完 成 或 拒绝 ， 抑 或 只 是 抛 出 某 种 同步 错误 。 
的 是 ， 因 为 Promise 库 在 时 间 上 早 于 ES6 Promise， 它 们 不 得 已 遗留 了 这 
问题 ， 所 以 ， 要 注意 ， 永 远 不 要 递送 空 数组 。 

















再 回顾 一 下 前 面 的 并 发 Ajax 例子 ， 不 过 这 次 的 pl 和 p2 是 竞争 关系 : 





// _ request(. .) 是 一 个 支持 Promise 的 Ajax 工具 
// 就 像 我 们 在 本 章 前 面 定 义 的 一 样 








Var pl 
Var p2 


= request( "http://some.url.1/" ); 
= request( "http://some.url.2/" ); 
Promise.race( [p1,p2] ) 
.then( function(msg){ 

// p1 或 者 p2 将 赢得 这 场 竞 赛 

return request( 

"http://some.url.3/?Vv=" + msg 

入 
}) 
.then( function(msg){ 

console.log( msg ); 


} 3 


因为 只 有 一 个 promise 能 够 取胜 ， 所 以 完成 值 是 单个 消息 ， 而 不 是 像 对 Promise.all([ .. ]) 
那样 的 是 一 个 数组 。 


1. 超时 竞赛 
我 们 之 前 看 到 过 这 个 例子 ， 其 展示 了 如 何 使 用 Promise.race([ .. ]) 表达 Promise 超时 模式 : 


// foo() 是 一 个 支持 Promise 的 函数 











// 前 面 定义 的 timeoutPromise(..) 返 回 一 个 promise， 
// 这 个 promise 会 在 指定 延 时 之 后 拒绝 


// 为 foo() 设 定 超时 
Promise.race( [ 
foo(), // 启动 foo() 
timeoutPromise( 3000 ) // 给 它 3 秒 钟 
] ) 
.then( 
function(){ 


// foo(..) 按 时 完成 ! 








function(err){ 
// 要 么 foo() 被 拒绝 ,要 么 只 是 没 能 够 按时 完成 ， 
// 因此 要 查看 err 了 解 具 体 原 因 























} 
六 


在 多 数 情况 下 ， 这 个 超时 模式 能 够 很 好 地 工作 。 但 是 ， 还 有 一 些微 妙 的 情况 需要 考虑 ， 并 
且 坦 白地 说 ， 对 于 Promitse.race([ .. ]) 和 Promise.all([ .. ]) 也 都 是 如 此 。 





2.finally 

一 个 关键 问题 是 :“ 那 些 被 丢弃 或 忽略 的 promise 会 发 生 什么 呢 ? ”我 们 并 不 是 从 性 能 的 
角度 提出 这 个 问题 的 一 一 通常 最 终 它们 会 被 垃圾 回收 一 一 而 是 从 行为 的 角度 (副作用 等 )。 
Promise 不 能 被 取消 ， 也 不 应 该 被 取消 ， 因 为 那 会 摧毁 3.8.5 布 讨论 的 外 部 不 变性 原则 ， 所 
以 它们 只 能 被 默默 忽略 。 








那么 如 果 前 面 例子 中 的 foo() 保留 了 一 些 要 用 的 资源 ， 但 是 出 现 了 超时 ， 导 致 这 个 promise 
被 忽略 ， 这 又 会 怎样 呢 ? 在 这 种 模式 中 ， 会 有 什么 为 超时 后 主动 释放 这 些 保 留 资源 提供 任 
何 支持 ， 或 者 取消 任何 可 能 产生 的 副作用 吗 ? 如 果 你 想 要 的 只 是 记录 下 foo() 超时 这 个 事 
实 ， 又 会 如 何 呢 ? 














有 些 开发 者 提出 ，Promise 需要 一 个 finally(..) 回调 注册 ， 这 个 回调 在 Promise 决议 后 总 
是 会 被 调用 ， 并 且 允 许 你 执行 任何 必要 的 清理 工作 。 目 前 ， 规 范 还 没有 支持 这 一 点 ， 不 过 
在 ES7+ 中 也 许可 以 。 只 好 等 等 看 了 。 


它 看 起 来 可 能 类 似 于 : 








var p = Promise.resolve( 42 ); 


p.then( something ) 
.finally( cleanup ) 
.then( another ) 

.finally( cleanup ); 
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在 各 种 各 样 的 Promise 库 中 ，finally(..) 还 是 会 创建 并 返回 一 个 新 的 
Promise (以 支持 链接 继续 )。 如 果 cleanup(..) 函数 要 返回 一 个 Promise 的 
话 ， 这 个 promise 就 会 被 连接 到 链 中 ， 这 意味 着 这 里 还 是 会 有 前 面 讨论 过 的 
未 处 理 拒绝 问题 。 




















同时 ， 我 们 可 以 构建 一 个 静态 辅助 工具 来 支持 查看 (而 不 影响 ) Promise 的 决议 : 


// polyfill 安 全 的 guard 检 查 
if (!Promise.observe) { 
Promise.observe = function(pr,cb) { 
// 观察 pr 的 决议 
pr.then( 
function fulfilled (msg){ 
// 安排 异步 回调 (作为 Job) 


Promise.resolve( msg ) .then( cb ); 





和 
function rejected(err){ 
// 安排 异步 回调 (作为 Job) 
Promise.resolve( err ).then( cb ); 


} 





); 





// 返回 最 初 的 promise 
return pr; 
}; 
} 


外 是 如 何在 前 面 的 超时 例子 中 使 用 这 个 工具 : 





村 











Promise.race( [ 
Promise.observel 
foo()， // 试 着 运行 foo() 
function cleanup(msg){ 


// 在 foo() 之 后 清理 ,即使 它 没有 在 超时 之 前 完成 











3 
timeoutPromise( 3000 ) // 给 它 3 秒 钟 


] ) 
这 个 辅助 工具 Promise.observe(..) 只 是 用 来 展示 可 以 如 何 查 看 Promise 的 完成 而 不 对 其 产 
生 影 响 。 其 他 的 Promise 库 有 自己 的 解决 方案 。 不 管 如 何 实现 ， 你 都 很 可 能 遇 到 需要 确保 
Promise 不 会 被 意外 默默 忽略 的 情况 。 




















3.6.3 all([ .. ]) 和 race([ .. ]) 的 变 体 


虽然 原生 ES6 Promise 中 提供 了 内 建 的 Promise.all([ .. ]) 和 Promise.race([ .. ]), 但 
这 些 语义 还 有 其 他 几 个 常用 的 变 体 模式 。 

















none([ .. ]) 
这 个 模式 类 似 于 aLL([ .，])， 不 过 完成 和 拒绝 的 情况 互 换 了 。 所 有 的 Promise 都 要 被 
拒绝 ， 即 拒绝 转化 为 完成 值 ， 反 之 亦 然 。 


any([ .. ]) 
这 个 模式 与 aLL([ .. ]) 类似 ， 但 是 会 忽略 拒绝 ， 所 以 只 需要 完成 一 个 而 不 是 全 部 。 





first([ .. ]) 
这 个 模式 类 似 于 与 any([ .. ]) 的 竞争 ， 即 只 要 第 一 个 Promise 完成 ， 它 就 会 忽略 后 续 
的 任何 拒绝 和 完成 。 

Last([ .. ]) 

这 个 模式 类 似 于 first([ .. ]), 但 却 是 只 有 最 后 一 个 完成 胜出 。 





有 些 Promise 抽象 库 提 供 了 这 些 支持 ， 但 也 可 以 使 用 Promise、race([ .. ]) 和 all([ .. ]) 
这 些 机 制 ， 你 自己 来 实现 它们 。 


比如 ， 可 以 像 这 样 定义 ftrst([ .，]): 


// polyfill 安 全 的 guard 检 查 
if (!Promise.first) { 
Promise.first = function(prs) { 
return new Promise( function(resolve,reject){ 
// 在 所 有 promise 上 循环 
prs.forEach( function(pr){ 
// 把 值 规 整 化 
Promise.resolve( pr ) 
// 不 管 哪个 最 先 完成 ,就 决议 主 promise 
.then( resolve ); 
} ); 
} ); 
}; 





在 这 个 first(..) 实现 中 ， 如 它 的 所 有 promise 都 拒绝 的 话 ， 它 不 会 拒绝 。 
它 只 会 挂 住 ， 非 常 类 似 于 Promise.race([])。 如 果 需 要 的 话 ， 可 以 添加 人 额 
外 的 逻辑 跟踪 每 个 promise 拒绝 。 如 果 所 有 的 promise 都 被 拒绝 ， 就 在 主 
promise 上 调用 reject()。 这 个 实现 留 给 你 当 练 习 。 














3.6.4 ”并 发 迭代 


有 些 时 候 会 需要 在 一 列 Promise 中 迭代 ， 并 对 所 有 Promise 都 执行 某 个 任务 ， 非 常 类 似 于 
对 同步 数组 可 以 做 的 那样 (比如 forEach(..)、map(..)、some(..) 和 every(..))。 如 果 
要 对 每 个 Promise 执行 的 任务 本 身 是 同步 的 ， 那 这 些 工具 就 可 以 工作 ， 就 像 前 面 代码 中 的 
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forEach(..)。 


但 如 有 果 这 些 任务 从 根本 上 是 异步 的 ， 或 者 可 以 /应 该 并 发 执行 ， 那 你 可 以 使 用 这 些 工 具 的 
异步 版 本 ， 许 多 库 中 提供 了 这 样 的 工具 。 








举例 来 说 ， 让 我 们 考虑 一 下 一 个 异步 的 map(..) 工具 。 它 接收 一 个 数组 的 值 (可 以 是 
Promise 或 其 他 任何 值 )， 外 加 要 在 每 个 值 上 运行 一 个 函数 (任务 ) 作为 参数 。map(..) 本 
身 返 回 一 个 promise， 其 完成 值 是 一 个 数组 ， 该 数组 (保持 映射 顺序 ) 保存 任务 执行 之 后 
的 异步 完成 值 : 

















if (!Promise.map) { 
Promise.map = function(vals,cb) { 
// 一 个 等 待 所 有 map 的 promise 的 新 promise 
return Promise.all( 
// 注 :一 般 数 组 map(..) 把 值 数组 转换 为 promise 数 组 
vals.map( function(val){ 
// 用 val 异 步 map 之 后 决议 的 新 promise 替 换 val 
return new Promise( function(resolve){ 
cb( val, resolve ); 





下 
}) 
); 
}; 





在 这 个 map(..) 实现 中 ， 不 能 发 送 异 步 拒绝 信号 ， 但 如 果 在 映射 的 回调 
(cb(..)) 内 出 现 同 步 的 异常 或 错误 ， 主 Promise.map(..) 返回 的 promise 
































就 会 拒绝 。 
下 面 展 示 如 何在 一 组 Promise (而 非 简 单 的 值 ) 上 使 用 map(..): 
var p1 = Promise.resolve( 21 ); 
var p2 = Promise.resolve( 42 ); 
var p3 = Promise.reject( "Oops" ); 


// 把 列表 中 的 值 加 倍 ,即使 是 在 Promise 中 
Promise.map( [pi,p2,p3], function(pr,done){ 
// 保证 这 一 条 本 身 是 一 个 Promise 
Promise.resolve( pr ) 
.then( 
// 提取 值 作为 v 
function(v){ 
// map 完成 的 v 到 新 值 


done( Vv * 2 ); 




















3 
// 或 者 map 到 promise 拒 绝 消息 


done 








}) 
.then( function(vals){ 

console.log( vals ); // [42,84,"0ops"] 
加 


3.7 Promise API 概述 
本 章 已 经 在 多 处 零 零 碎 碎 地 展示 了 ES6 Promise API， 现 在 让 我 们 来 总 结 一 





下 面 的 API 只 对 于 ES6 是 原生 的 ， 但 是 有 符合 规范 的 适 配 版 〈 不 只 是 对 
Promise 库 的 扩展 )， 其 定义 了 Promise 及 它 的 所 有 相关 特性 ， 这 样 你 在 前 
ES6 浏览 器 中 也 可 以 使 用 原生 Promise。 这 样 的 适 配 版 之 一 是 Native Promise 
Only (http://github.com/getify/native-promise-only)， 是 我 写 的 。 














3.7.1 new Promise(..) 构造 器 


有 启示 性 的 构造 器 en eve new 一 起 使 用 ， 并 且 必 须 提 供 一 个 国 数 回调 。 和 
回调 是 同步 的 或 立即 调用 的 。 这 个 函数 接受 两 个 函数 回调 ， 用 以 支持 promise 的 决议 。 通 
常 我 们 把 这 两 个 函数 称 为 a ..) 和 reject(..): 
var p = new Promise( function(resolve,reject){ 
// resolve(..) 用 于 决议 /完成 这 个 promise 
// reject(..) 用 于 拒绝 这 个 promise 
}); 




















reject(..) 就 是 拒绝 这 个 promise; 但 resolve(..) 既 可 能 完成 promise， 也 可 能 拒绝 ， 要 
根据 传 和 参数 而 定 。 如 果 传 给 resolvel..) 的 是 一 个 非 Promise、 非 thenable 的 立即 值 ， 这 
个 promise 就 会 用 这 个 值 完成 。 





但 是 ， 如 果 传 给 resolve(..) 的 是 一 个 真正 的 Promise 或 thenable 值 ， 这 个 值 就 会 被 递归 展 
开 ， 并且 (要 构造 的 ) promise 将 取 用 其 最 终 决 议 值 或 状态 。 





3.7.2 Promise.resolve(..) 和 Promise.reject(..) 
创建 一 个 已 被 拒绝 的 Promise 的 快捷 方式 是 使 用 Promise.reject(..)， 所 以 以 下 两 个 


promise 是 二 等 价 的 : 





var pl = new Promise( function(resolve,reject){ 
reject( "Oops" ); 
}); 


var p2 = Promise.reject( "Oops" ); 


Promise.resolve(..) 常用 于 创建 一 个 已 完成 的 Promise， 使 用 方式 与 Promise.reject(..) 
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类 似 。 但 是 ，Promise.resolve(..) 也 会 展开 thenable 值 (前 面 已 多 次 介绍 )。 在 这 种 情况 
下 ， 返 回 的 Promise 采用 传 入 的 这 个 thenable 的 最 终 决 议 值 ， 可 能 是 完成 ， 也 可 能 是 拒绝 : 














var fulfilledTh = { 
then: function(cb) { cb( 42 ); } 


var rejectedTh = { 
then: function(cb,errCb) { 
errCb( "Oops" ); 


} 
}; 
var pl = Promise.resolve( fulfilledTh ); 
var p2 = Promise.resolve( rejectedTh ); 


// pl 是 完成 的 promise 

// P2 是 拒绝 的 promise 
还 要 记 住 ， 如 果 传 入 的 是 真正 的 Promise，Promise.resolve(..) 什么 都 不 会 做 ， 只 会 直接 
把 这 个 值 返 回 。 所 以 ， 对 你 不 了 解 属性 的 值 调用 Promise.resolve(..)， 如 果 它 恰好 是 一 个 
真正 的 Promise， 是 不 会 有 额外 的 开销 的 。 























3.7.3 then(..) 和 catch(..) 


每 个 Promise 实例 (不 是 Promise API 命名 空间 ) 都 有 then(..) 和 catch(..) 方法 ， 通 过 
这 两 个 方法 可 以 为 这 个 Promise 注册 完成 和 拒绝 处 理 函 数 。Promise 决议 之 后 ， 立 即 会 调用 
这 两 个 处 理 函 数 之 一 ， 但 不 会 两 个 都 调用 ， 而 且 总 是 异步 调用 (参见 1.5 市 )。 

then(..) 接受 一 个 或 两 个 参数 : 第 一 个 用 于 完成 回调 ， 第 二 个 用 于 拒绝 回调 。 如 果 两 者 中 


的 任何 一 个 被 省 略 或 者 作为 非 国 数值 传人 人 的话， 就 会 替换 为 相应 的 默认 回调 。 默 认 完 成 回 
调 只 是 把 消息 传递 下 去 ， 而 默认 拒绝 回调 则 只 是 重新 抛 出 〈 传 播 ) 其 接收 到 的 出 错 原因 。 


就 像 刚 刚 讨论 过 的 一 样 ，catch(..) 只 接受 一 个 拒绝 回调 作为 参数 ， 并 自动 替换 默认 完成 
回调 。 换 句 话说， 它 等 价 于 then(null,..): 









































p.then( fulfilled ); 
p.then( fulfilled, rejected ); 


p.catch( rejected ); // 或 者 p.then( null, rejected ) 





then(..) 和 catch(..) 也 会 创建 并 返回 一 个 新 的 promise， 这 个 promise 可 以 用 于 实现 
Promise 链 式 流程 控制 。 如 果 完 成 或 拒绝 回调 中 抛 出 异常 ， 返 回 的 promise 是 被 拒绝 的 。 如 
果 任 意 一 个 回调 返回 非 Promise、 非 thenable 的 立即 值 ， 这 个 值 会 被 用 作 返 回 promise 的 完 
成 值 。 如 果 完 成 处 理 函 数 返 回 一 个 promise 或 thenable， 那 么 这 个 值 会 被 展开 ， 并 作为 返回 
promise 的 决议 值 。 
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3.7.4 Promise.all([ .. ]) 和 Promise.race([ .. ]) 


ES6 Promise API 静态 辅助 冰 数 Promise.all([ .. ]) 和 Promise.race([ .. ]) 都 会 创建 一 
个 Promise 作为 它们 的 返回 值 。 这 个 promise 的 决议 完全 由 传 入 的 promise 数组 控制 。 


对 Promise.all([ .. ]) 来 说 ， 只 有 传人 的 所 有 promise 都 完成 ， 返 回 promise 才能 完成 。 
如 果 有 任何 promise 被 拒绝 ， 返 回 的 主 promise 就 立即 会 被 拒绝 (抛弃 任何 其 他 promise 的 
结果 )。 如 果 完 成 的 话 ， 你 会 得 到 一 个 数组 ， 其 中 包含 传人 的 所 有 promise 的 完成 值 。 对 于 
拒绝 的 情况 ， 你 只 会 得 到 第 一 个 拒绝 promise 的 拒绝 理由 值 。 这 种 模式 传统 上 被 称 为 门 : 
所 有 人 都 到 齐 了 才 开 门 。 





对 Promise.race([ .. ]) 来 说 ， 只 有 第 一 个 决议 的 promise (完成 或 拒绝 ) 取胜 ， 并 且 甚 
决议 结果 成 为 返回 promise 的 决议 。 这 种 模式 传统 上 称 为 门 门 : 第 一 个 到 达 者 打开 门 门 通 

















var pl = Promise.resolve( 42 ); 
var p2 = Promise.resolve( "Hello World" ); 
var p3 = Promise.reject( "Oops" ); 


Promise.race( [p1,p2,p3] ) 

.then( function(msg){ 
console.log( msg ); // 42 

上 


Promise.all( [pi,p2,p3] ) 
.Catch( function(err)t{ 
console.error( err ); // "Qops" 


下 


Promise.all( [pl,p2] ) 
.then( function(msgs){ 

console.log( msgs ); // [42,"Hello World"] 
3 








当心 ! 若 向 Promise.all([ .. ]) 传 入 空 数组 ， 它 会 立即 完成 ， 但 Promise. 
race([ .. ]) 会 挂 住 ， 且 永远 不 会 决议 。 


ES6 Promise API 非常 简单 直观 。 它 至 少 足以 处 理 最 基本 的 异步 情况 ， 并 且 如 果 要 重新 整 
理 ， 把 代码 从 回调 地 狱 解 救出 来 的 话 ， 它 也 是 一 个 很 好 的 起 点 。 








但 是 ， 应 用 常常 会 有 很 多 更 复杂 的 异步 情况 需要 实现 ， 而 Promise 本 身 对 此 在 处 理 上 具有 
局 限 性 。 下 一 市 会 深入 探讨 这 些 局 限 ， 理 解 Promise 库 出 现 的 动机 。 
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3.8 Promise 局 限 性 


这 一 节 讨论 的 许多 细节 本 章 之 前 都 已 经 有 所 提 及 ， 不 过 我 们 还 是 一 定 要 专门 总 结 这 些 局 限 
性 才 行 。 


3.8.1 顺序 错误 处 理 

本 章 前 面 已 经 详细 介绍 了 适合 Promise 的 错误 处 理 。Promise 的 设计 局 限 性 (具体 来 说 ， 就 
是 它们 链接 的 方式 ) 造成 了 一 个 让 人 很 容易 中 招 的 陷阱 ， 即 Promise 链 中 的 错误 很 容易 被 
无 意 中 上 默默 忽略 掉 。 


关于 Promise 错误 ， 还 有 其 他 需要 考虑 的 地 方 。 由 于 一 个 Promise 链 仅 仅 是 连接 到 一 起 的 
成 员 Promise， 没 有 把 整个 链 标 识 为 一 个 个 体 的 实体 ， 这 意味 着 没有 外 部 方法 可 以 用 于 观 
察 可 能 发 生 的 错误 。 


如 果 构 建 了 一 个 没有 错误 处 理 函 数 的 Promise 链 ， 链 中 任何 地 方 的 任何 错误 都 会 在 链 中 一 
直 传 播 下 去 ， 直 到 被 查看 (通过 在 某 个 步 又 注册 拒绝 处 理 函 数 )。 在 这 个 特定 的 例子 中 ， 
只 要 有 一 个 指向 链 中 最 后 一 个 promise 的 引用 就 是 够 了 (下面 代码 中 的 p)， 因 为 你 可 以 在 
那里 注册 拒绝 处 理 函 数 ， 而 且 这 个 处 理 函 数 能 够 得 到 所 有 传播 过 来 的 错误 的 通知 : 







































































// foo(..)，STEP2(..) 以 及 STEP3(..) 都 是 支持 promise 的 工具 








var p = foo( 42 ) 
.then( STEP2 ) 
.then( STEP3 ); 











虽然 这 里 可 能 有 点 鬼 峙 、 令 人 迷惑 ， 但 是 这 里 的 p 并 不 指向 链 中 的 第 一 个 promise (调用 
foo(42) 产生 的 那 一 个 ) ， 而 是 指向 最 后 一 个 promise， 即 来 自 调用 then(STEP3) 的 那 一 个 。 


还 有 ， 这 个 Promise 链 中 的 任何 一 个 步骤 都 没有 显 式 地 处 理 自身 错误 。 这 意味 着 你 可 以 在 
p 上 注册 一 个 拒绝 错误 处 理 函 数 ， 对 于 链 中 任何 位 置 出 现 的 任何 错误 ， 这 个 处 理 函 数 都 会 
得 到 通知 : 














p.catch( handleErrors ); 


但 是 ， 如 果 链 中 的 任何 一 个 步骤 事实 上 进行 了 自身 的 错误 处 理 (可 能 以 隐藏 或 抽象 的 不 可 
见 的 方式 )， 那 你 的 handleErrors(..) 就 不 会 得 到 通知 。 这 可 能 是 你 想 要 的 一 一 毕竟 这 是 
一 个 “已 处 理 的 拒绝 ”一 一 但 也 可 能 并 不 是 。 完 全 不 能 得 到 (对 任何 “已 经 处 理 ” 的 拒绝 
错误 的 ) 错误 通知 也 是 一 个 缺陷 ， 它 限制 了 某 些 用 例 的 功能 。 























基本 上 ， 这 等 同 于 try. .catch 存在 的 局 限 : try..catch 可 能 捕获 一 个 异常 并 简单 地 吞 掉 
它 。 所 以 这 并 不 是 Promise 独 有 的 局 限 性 ， 但 可 能 是 我 们 希望 绕 过 的 陷阱 。 

















遗憾 的 是 ， 很 多 时 候 并 没有 为 Promise 链 序列 的 中 间 步 又 保留 的 引用 。 因 此 ， 没 有 这 样 的 
引用 ， 你 就 无 法 关联 错误 处 理 函 数 来 可 靠 地 检查 错误 。 


3.8.2 单一 值 
根据 定义 ，Promise 只 能 有 一 个 完成 值 或 一 个 拒绝 理由 。 在 简单 的 例子 中 ， 这 不 是 什么 问 
题 ， 但 是 在 更 复杂 的 场景 中 ， 你 可 能 就 会 发 现 这 是 一 种 局 限 了 。 





一 般 的 建议 是 构造 一 个 值 封装 〈 比 如 一 个 对 象 或 数组 ) 来 保持 这 样 的 多 个 信息 。 这 个 解决 
方案 可 以 起 作用 ， 但 要 在 Promise 链 中 的 每 一 步 都 进行 封装 和 解 封 ， 就 十 分 丑陋 和 笨重 了 。 


1. 分 裂 值 
有 时 候 你 可 以 把 这 一 点 当 作 提示 你 可 以 /应 该 把 问题 分 解 为 两 个 或 更 多 Promise 的 信号 。 











设想 你 有 一 个 工具 foo(..)， 它 可 以 异步 产生 两 个 值 (x 和 y) : 


function getY(x) { 
return new Promise( function(resolve,reject){ 
setTimeout( function(){ 
resolve( (3 * x) - 1 ); 
}, 100 ); 
}); 
} 


function foo(bar,baz) { 
var x = bar * baz; 


return getY( x ) 
.then( function(y){ 
// 把 两 个 值 封装 到 容器 中 
return [x,y]; 
}); 
} 


foo( 10, 20 ) 

.then( function(msgs){ 
var x = msgs[0]; 
var y = msgs[1]; 


console.log( x, y ); // 200 599 
}); 





首先 ， 我 们 重新 组 织 一 下 foo(..) 返回 的 内 容 ， 这 样 就 不 再 需要 把 x 和 y 封装 到 一 个 数组 
值 中 以 通过 promise 传输 。 取 而 代 之 的 是 ， 我 们 可 以 把 每 个 值 封装 到 它 自己 的 promise: 


function foo(bar,baz) { 
var x = bar * baz; 


// 返回 两 个 promise 
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return [ 
Promise.resolve( x )， 
getY( x ) 
J; 
} 


Promise.all(l 
foo( 10, 20 ) 

) 

.then( function(msgs){ 
var x = msgs[0]; 
var y = msgs[1]; 


console.log( x, y ); 


Fs 


一 个 promise 数组 真 的 要 优 于 传递 给 单个 promise 的 一 个 值 数 组 吗 ? 从 语法 的 角度 来 说 ， 


这 算 不 上 是 一 个 改进 。 


但 是 ， 这 种 方法 更 符合 Promise 的 设计 理念 。 如 果 以 后 需要 重 构 代码 把 对 x 和 y 的 计算 分 
开 ， 这 种 方法 就 简单 得 多 。 由 调用 代码 来 决定 如 何 安排 这 两 个 promise， 而 不 是 把 这 种 细 











节 放 在 foo(..) 内 部 抽象 ， 这 样 更 整洁 也 更 灵活 。 这 里 使 用 了 Promise.all([ .. 


2. 展开 / 传递 参数 











])， 当 


var x = .. 和 var y = … 赋值 操作 仍然 是 麻烦 的 开销 。 我 们 可 以 在 辅助 工具 中 采用 某 种 





函数 技巧 (感谢 Reginald Braithwaite， 推 特 : @raganwald) : 





function spread(fn) { 
return Function.apply.bind( fn, null ); 
} 


Promise.all(l 
foo( 10, 20 ) 


) 
.then( 
spread( function(x,y){ 
console.log( x, y ); // 200 599 
}) 
) 


这 样 会 好 一 点 ! 当然 ， 你 可 以 把 这 个 函数 戏法 在 线 化 ， 以 避免 额外 的 辅助 工具 : 











Promise.all(l 
foo( 10, 20 ) 
) 
.then( Function.apply.bind( 
function(x,y){ 
console.log( x, y ); // 200 599 





null 
) ); 


这 些 技巧 可 能 很 灵巧 ， 但 ES6 给 出 了 一 个 更 好 的 答案 : 解构 。 数 组 解构 赋值 形式 看 起 来 是 
这 样 的 : 
Promise.all( 


foo( 10, 20 ) 


.then( function(msgs){ 
var [x,y] = msgs; 


console.log( x, y ); // 200 599 
地 


不 过 最 好 的 是 ，ES6 提供 了 数组 参数 解构 形式 : 


Promise.all( 
foo( 10, 20 ) 
) 
.then( function([x,y]){ 
console.log( x, y ); // 200 599 
}); 


现在 ， 我 们 符合 了 “每 个 Promise 一 个 值 ” 的 理念 ， 并 且 又 将 重复 样板 代码 量 保 持 在 了 最 
小 | 




















关于 ES6 解构 形式 的 更 多 信息 ， 请 参考 本 系列 的 《你 不 知道 的 JavaScript 
(下 卷 )》 的 “ES & Beyond” 部 分 。 








3.8.3 ” 单 决议 
Promise 最 本 质 的 一 个 特征 是 : Promise 只 能 被 决议 一 次 (完成 或 拒绝 )。 在 许多 异步 情况 
中 ， 你 只 会 获取 一 个 值 一 次 ， 所 以 这 可 以 工作 良好 。 





但 是 ， 还 有 很 多 异步 的 情况 适合 另 一 种 模式 一 一 一 种 类 似 于 事件 和 /或 数据 流 的 模式 。 
在 表面 上 ， 目 前 还 不 清楚 Promise 能 不 能 很 好 用 于 这 样 的 用 例 ， 如 果 不 是 完全 不 可 用 的 
话 。 如 果 不 在 Promise 之 上 构建 显赫 的 抽象 ，Promise 肯定 完全 无 法 支持 多 值 决 议 处 理 。 





























设想 这 样 一 个 场景 : 你 可 能 要 启动 一 系列 异步 步骤 以 响应 某 种 可 能 多 次 发 生 的 激励 (就 像 
是 事件 )， 比 如 按钮 点 击 。 


这 样 可 能 不 会 按照 你 的 期 望 工作 : 
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// cLick(..) 把 "cLick" 事 件 绑 定 到 一 个 DOM 元 素 
// request(. .) 是 前 面 定 义 的 支持 Promitse 的 Ajax 


var p = new Promise( function(resolve,reject){ 
click( "#mybtn", resolve ); 


0 


p.then( function(evt){ 
var btnID = evt.currentTarget.id; 
return request( "http://some.url.1/?id=" + btnID ); 


J 


.then( function(text){ 
console.log( text ); 


二 





只 有 在 你 的 应 用 只 需要 响应 按钮 点 击 一 次 的 情况 下 ， 这 种 方式 才能 工作 。 如 果 这 个 按钮 被 


点 击 了 第 二 次 的 话 ， 


promise p 已 经 决议 ， 因 此 第 二 个 resolvel..) 调用 就 会 被 忽略 。 





因此 ， 你 可 能 需要 转化 这 个 范例 ， 为 每 个 事件 的 发 生 创建 一 整个 新 的 Promise 链 : 


click( "#mybtn", function(evt){ 
var btnID = evt.currentTarget.id; 


request( "http://some.url.1/?id=" + btnID ) 
.then( function(text){ 
console.log( text ); 


} 
ys 


这 种 方法 可 以 工作 ， 
序列 。 





因为 针对 这 个 按钮 上 的 每 个 "click" 事件 都 会 启动 一 整个 新 的 Promise 











由 于 需要 在 事件 处 到 








函数 中 定义 整个 Promise 链 ， 这 很 丑陋 。 除 此 之 外 ， 这 个 设计 在 某 种 


程度 上 破坏 了 关注 点 与 功能 分 离 (SoC) 的 思想 。 你 很 可 能 想 要 把 事件 处 理 函数 的 定义 和 
对 事件 的 响应 (那个 Promise 链 ) 的 定义 放 在 代码 中 的 不 同位 置 。 如 果 没 有 辅助 机 制 的 话 ， 
在 这 种 模式 下 很 难 这 样 实现 。 





另外 一 种 清晰 展示 这 种 局 限 性 的 方法 是 : 如 果 能 够 构建 某 种 “可 观测 量 ” 
(observable) ， 可 以 将 一 个 Promise 链 对 应 到 这 个 “可 观测 量 ” 就 好 了 。 有 
一 些 库 已 经 创建 了 这 样 的 抽象 (比如 RxJS，http://rxjs.codeplex.com)， 但 是 
这 种 抽象 看 起 来 非常 笨重 ， 以 至 于 你 甚至 已 经 看 不 到 任何 Promise 本 身 的 特 
性 。 这 样 厚重 的 抽象 带 来 了 一 些 需 要 考虑 的 重要 问题 ， 比 如 这 些 机 制 (无 
Promise) 是 否 像 Promise 本 身 设计 的 那样 可 以 信任 。 附 录 B 会 再 次 讨论 这 种 
“可 观测 量 ” 模 式 。 





























3.8.4 惯性 

要 在 你 自己 的 代码 中 开始 使 用 Promise 的 话 ， 一 个 有 具体 的 障碍 是 ， 现 存 的 所 有 代码 都 还 不 
理解 Promise。 如 果 你 已 经 有 大 量 的 基于 回调 的 代码 ， 那 么 保持 编码 风格 不 变 要 简单 得 多 。 
“运动 状态 (使 用 回调 的 ) 的 代码 库 会 一 直 保 持 运动 状态 (使 用 回调 的 )， 直 到 受到 一 位 有 聪 
明 的 、 理 解 Promise 的 开发 者 的 作用 。” 
Promise 提供 了 一 种 不 同 的 范式 ， 因 此 ， 编 码 方式 的 改变 程度 从 某 处 的 个 别 差异 到 某 种 情 
况 下 的 截然 不 同 都 有 可 能 。 你 需要 刻意 的 改变 ， 因 为 Promise 不 会 从 目前 的 编码 方式 中 自 
然而 然 地 衍生 出 来 。 


考虑 如 下 的 类 似 基 于 回调 的 场景 : 


















































function foo(x,y,cb) { 
ajax( 
"http://some.url.1/?x=" + X + "&y=" + y， 
cb 
); 
} 


foo( 11, 31, function(err,text) { 
if (err) { 
console.error( err ); 


else { 
console.log( text ); 
} 
于 
能 够 很 快 明显 看 出 要 把 这 段 基 于 回调 的 代码 转化 为 基于 Promise 的 代码 应 该 从 哪些 步骤 开 
始 吗 ? 这 要 视 你 的 经 验 而 定 。 实 践 越 多 ， 越 会 觉得 得 心 应 手 。 但 可 以 确定 的 是 ，Promise 
并 没有 明确 表示 要 如 何 实现 转化 。 没 有 放 之 四 海 皆 准 的 答案 ， 责 任 还 是 在 你 的 身上 。 


如 前 所 述 ， 我 们 绝对 需要 一 个 支持 Promise 而 不 是 基于 回调 的 Ajax 工具 ， 可 以 称 之 为 
request(..)。 你 可 以 实现 自己 的 版 本 ， 就 像 我 们 所 做 的 一 样 。 但 是 ， 如 果 不 得 不 为 每 个 基 
于 回调 的 工具 手工 定义 支持 Promise 的 封装 ， 这 样 的 开销 会 让 你 不 太 可 能 选择 支持 Promise 
的 重 构 。 


Promise 没有 为 这 个 局 限 性 直接 提供 答案 。 多 数 Promise 库 确实 提供 辅助 工具 ， 但 即使 没有 
库 ， 也 可 以 考虑 如 下 的 辅助 工具 : 





























// polyfill 安 全 的 guard 检 查 
if (!Promise.wrap) { 
Promise.wrap = function(fn) { 
return function() { 
var args = [].slice.call( arguments ); 
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return new Promise( function(resolve,reject){ 


fn.appLy( 
null, 
args.concat( function(err,v){ 
if (err) { 
reject( err ); 
} 
else { 
resoLve( v ); 
} 
}) 
); 
3 


}; 
} 
好 吧 ， 这 不 只 是 一 个 简单 的 小 工具 。 然 而 ， 尽 管 它 看 起 来 有 点 令 人 生 眼 ,但 是 实际 上 并 不 
像 你 想 的 那么 糟糕 。 它 接受 一 个 函数 ， 这 个 函数 需要 一 个 error-first 风格 的 回调 作为 第 一 个 
参数 ， 并 返回 一 个 新 的 函数 。 返 回 的 函数 自动 创建 一 个 Promise 并 返回 ， 并 替换 回调 ， 连 
接 到 Promise 完成 或 拒绝 。 


与 其 花费 太 多 时 间 解 释 这 个 Promise.wrap(.….) 辅助 工具 的 工作 原理 ， 还 不 如 直接 看 看 其 使 
用 方式 : 





























var request = Promise.wrap( ajax ); 


request( "http://some.url.1/" ) 
.then( .. ) 


一 


竺 ， 非 常 简单 


Promise.wrap(..) 并 不 产 出 Promise。 它 产 出 的 是 一 个 将 产生 Promise 的 函数 。 在 某 种 意义 
上 ， 产 生 Promise 的 函数 可 以 看 作 是 一 个 Promise 工厂 。 我 提议 将 其 命名 为 “promisory” 


(“Promise” + “factory” )。 








把 需要 回调 的 函数 封装 为 支持 Promise 的 函数 ， 这 个 动作 有 时 被 称 为 “提升 ”或 “Promise 
工厂 化 *。 但 是 ， 对 于 得 到 的 结果 函数 来 说 ， 除 了 “被 提升 函数 ”似乎 就 没有 什么 标准 术 
语 可 称呼 了 。 所 以 我 更 喜欢 “promisory” 这 个 词 ， 我 认为 它 的 描述 更 准确 。 








promisory 并 不 是 编造 的 。 它 是 一 个 真实 的 单词 ， 意 思 是 包含 或 传输 一 个 
promise。 这 正 是 这 些 国 数 所 做 的 ， 所 以 这 个 术语 与 其 意义 匹配 得 很 完美 。 





于 是 ，Promise.wrap(ajax) 产生 了 一 个 ajax(..) promisory， 我 们 称 之 为 request(..)。 这 


个 promisory 为 Ajax 响应 生成 Promise。 





如 果 所 有 函数 都 已 经 是 promisory， 我 们 就 不 需要 自己 构造 了 ， 所 以 这 个 额外 的 步骤 有 点 
可 惜 。 但 至 少 这 个 封装 模式 (通常 ) 是 重复 的 ， 所 以 我 们 可 以 像 前 面 展 示 的 那样 把 它 放 入 
Promise.wrap(..) 辅助 工具 ， 以 帮助 我 们 的 promise 编码 。 








所 以 ， 回 到 前 面 的 例子 ， 我 们 需要 为 ajax(..) 和 foo( 











// 为 ajax(..) 构 造 一 个 promitsory 
var request = Promise.wrap( ajax ); 























// 重 构 foo(..), 但 使 其 外 部 成 为 基于 外 部 回调 的 ， 
// 与 目前 代码 的 其 他 部 分 保持 通用 
// 一 一 只 在 内 部 使 用 request(..) 的 promise 
function foo(x,y,cb) { 
request( 
"http://some.url.1/?x=" + X + "&y=" + y 














) 
.then( 
function fulfilled(text){ 
cb( null, text ); 
]， 
cb 
); 


} 





..) 都 构造 一 个 promisory: 


// 现在 ,为 了 这 段 代码 的 目的 ,为 foo(..) 构 造 一 个 promisory 








var betterFoo = Promise.wrap( foo ); 


// 并 使 用 这 个 promisory 
betterFoo( 11, 31 ) 
.then( 
function fulfilled(text){ 
console.log( text ); 





]， 
function rejected(err){ 
console.error( err ); 
} 
); 











foo(..) 本 身 成 为 一 个 promisory， 而 不 是 保持 基于 回 


当然 ， 尽 管 我 们 在 重 构 foo(..) 以 使 用 新 的 request(..) promisory， 但 是 也 可 以 使 





调 的 形式 并 需要 构建 和 使 用 后 续 的 





betterFoo(..) promisory。 这 个 决策 就 取决 于 foo(..) 是 否 需要 保持 与 代码 库 中 其 他 部 分 兼 





容 的 基于 回调 的 形式 。 
考虑 : 




















现在 foo(..) 也 是 一 个 promisory, 因 为 它 委 托 了 request(..) promisory 


function foo(x,y) { 
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return request( 
"http://some.url.1/?x=" + Xx + "8&y=" + y 
外 
} 


foo( 11, 31 ) 
.then( .. ) 


尽管 原生 ES6 Promise 并 没有 提供 辅助 函数 用 于 这 样 的 promisory 封装 ， 但 多 数 库 都 提供 了 
这 样 的 支持 ， 或 者 你 也 可 以 构建 自己 的 辅助 函数 。 不 管 采用 何 种 方式 ， 解 决 Promise 这 个 
特定 的 限制 都 不 需要 太 多 代价 〈 可 对 比 回调 地 狱 给 我 们 带 来 的 痛苦 ! )。 





3.8.5 无 法 取消 的 Promise 
一 旦 创建 了 一 个 Promise 并 为 其 注册 了 完成 和 /或 拒绝 处 理 国 数 ， 如 果 出 现 某 种 情况 使 得 
这 个 任务 悬而未决 的 话 ， 你 也 没有 办 法 从 外 部 停止 它 的 进程 。 






































很 多 Promise 抽象 库 提供 了 工具 来 取消 Promise， 但 这 个 思路 很 可 怕 ! 很 多 
开发 者 希望 Promise 的 原生 设计 就 具有 外 部 取消 功能 ， 但 问题 是 ， 这 可 能 
会 使 Promise 的 一 个 消费 者 或 观察 者 影响 其 他 消费 者 查看 这 个 Promise。 这 
违背 了 未 来 值 的 可 信任 性 〈 外 部 不 变性 )， 但 更 坏 的 是 ， 这 是 “ 远 隔 作用 ” 
(action at a distance) 反 模 式 的 体现 (http://en.wikipedia.org/wiki/Action_at a_ 
distance_%28computer_programming9%29 ) 。 不 管 看 起 来 如 何 有 用 ， 这 实际 上 
会 导致 你 重 陷 与 使 用 回调 同样 的 豆 梦 。 











考虑 前 面 的 Promise 超时 场景 : 











var p = foo( 42 ); 


Promise.race( [ 


p, 
timeoutPromise( 3000 ) 


] ) 

.then( 
doSomething, 
handleError 


); 
p.then( function(){ 


// 即使 在 超时 的 情况 下 也 会 发 生 :( 
上 总 


这 个 “超时 ”相对 于 promise p 是 外 部 的 ， 所 以 p 本 身 还 会 继续 运行 ， 这 一 点 可 能 并 不 是 
我 们 所 期 望 的 。 


一 种 选择 是 侵入 式 地 定义 你 自己 的 决议 回调 : 





A 
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var OK = true; 
var p = foo( 42 ); 


Promise.race( [ 
pP， 
timeoutPromise( 3000 ) 
.Catch( function(err)f{ 
OK = false; 
throw err; 
}) 
| 
.then( 
doSomething, 
handleError 


2 


p.then( function(){ 
if (OK) { 
// 只 在 没有 超时 情况 下 才 会 发 生 :) 





he 
这 很 丑陋 。 它 可 以 工作 ,但 是 离 理 想 实 现 还 差 很 远 。 一 般 来 说 ， 应 避免 这 样 的 情况 。 


但 如 果 没 法 避免 的 话 ， 这 个 解决 方案 的 丑陋 应 该 是 一 个 线索 ， 它 提示 取消 这 个 功能 属于 
Promise 之 上 更 高 级 的 抽象 。 我 建议 你 应 查看 Promise 抽象 库 以 获得 帮助 ， 而 不 是 hack 自 
己 的 版 本 。 








我 的 Promise 抽象 库 asynquence 提供 了 这 样 一 个 抽象 ， 还 有 一 个 为 序列 提供 
的 abort() 功能 ， 这 些 内 容 都 会 在 本 部 分 的 附录 A 中 讨论 。 


单独 的 一 个 Promise 并 不 是 一 个 真正 的 流程 控制 机 制 (至 少 不 是 很 有 意义 )， 这 正 是 取消 所 
涉及 的 层次 (流程 控制 )。 这 就 是 为 什么 Promise 取消 总 是 让 人 感觉 很 别扭 。 


相 比 之 下 ， 集 合 在 一 起 的 Promise 构成 的 链 ， 我 喜欢 称 之 为 一 个 “序列 *“， 就 是 一 个 流程 控 
制 的 表达 ， 因 此 将 取消 定义 在 这 个 抽象 层次 上 是 合适 的 。 

















单独 的 Promise 不 应 该 可 取消 ， 但 是 取消 一 个 可 序列 是 合理 的 ， 因 为 你 不 会 像 对 待 Promise 
那样 把 序列 作为 一 个 单独 的 不 变 值 来 传送 。 





3.8.6 ” Promise 性 能 
这 个 特定 的 局 限 性 既 简单 又 复杂 。 
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把 基本 的 基于 回调 的 异步 任务 链 与 Promise 链 中 需要 移动 的 部 分 数量 进行 比较 。 很 显然 ， 
Promise 进行 的 动作 要 多 一 些 ， 这 自然 意味 着 它 也 会 稍 慢 一 些 。 请 回想 Promise 提供 的 信任 
保障 列表 ， 再 与 你 要 在 回调 之 上 建立 同样 的 保护 自 建 的 解决 方案 来 比较 一 下 。 


更 多 的 工作 ， 更 多 的 保护 。 这 些 意 味 着 Promise 与 不 可 信任 的 裸 回 调 相 比 会 更 慢 一 些 。 这 
是 显而易见 的 ， 也 很 容易 理解 。 






































显 
但 会 慢 多 少 呢 ? 呢 ， 实 际 上 ， 要 精确 回答 这 个 问题 极其 困难 。 

















坦白 地 说 ， 这 有 点 像 是 拿 伴 果 和 桔子 相 比 ， 所 以 这 可 能 就 是 一 个 错误 的 问题 。 实 际 上 ， 应 
该 比较 的 是 提供 了 同样 保护 的 手工 自 建 回调 系统 是 否 能 够 快 于 Promise 实现 。 




















如 果 说 Promise 确实 有 一 个 真正 的 性 能 局 限 的 话 ， 那 就 是 它们 没有 真正 提供 可 信任 性 保护 
支持 的 列表 以 供 选择 (你 总 是 得 到 全 部 )。 

虽然 如 此 ， 如 果 我 们 承认 Promise 通常 要 比 其 非 Promise、 非 可 信任 回调 的 等 价 系统 稍 微 
慢 一 点 (假定 有 些 情况 下 你 认为 可 以 接受 可 信任 性 的 缺乏 )， 这 是 否 意味 着 应 该 完全 避免 
Promise， 就 好 像 你 整个 应 用 的 唯一 驱动 力 就 是 必须 采用 尽 可 能 快 的 代码 呢 ? 









































合理 性 检查 : 如 果 你 的 代码 有 合理 的 理由 这 样 要 求 ， 那 么 JavaScript 是 否 真 的 是 实现 这 样 
任务 的 正确 语言 呢 ? 我 们 可 以 优化 JavaScript， 使 其 高 性 能 运行 应 用 (参见 第 5 章 和 第 6 
章 )。 但 是 ， 耿 耿 于 Promise 微小 的 性 能 损失 而 无 视 它 提供 的 所 有 优点 ， 真 的 合适 吗 ? 











另外 一 个 微妙 的 问题 是 : Promise 使 所 有 一 切 都 成 为 异步 的 了 ， 即 有 一 些 立 即 (同步 ) 完 
成 的 步骤 仍然 会 延迟 到 任务 的 下 一 步 〈 参 见 第 1 章 )。 这 意味 着 一 个 Promise 任务 序列 可 能 
比 完全 通过 回调 连接 的 同样 的 任务 序列 运行 得 稍 慢 一 点 。 


la 
所 雪 














当然 ， 这 里 的 问题 是 : 本 章 介绍 的 Promise 的 这 些 优点 是 否 值 得 付出 这 些微 小 的 性 能 损失 。 


我 的 观点 是 : 几乎 所 有 那些 你 可 能 认为 Promise 性 能 会 慢 到 需要 担心 的 情况 ， 实 际 上 都 是 
通过 绕 开 Promise 可 信任 性 和 可 组 合 性 优化 掉 了 它们 带 来 的 好 处 的 反 模 式 。 


取而代之 的 是 ， 在 默认 情况 下 ， 你 应 该 在 代码 中 使 用 它们 ， 然 后 对 你 应 用 的 热 路 径 进 行 性 
能 分 析 。Promise 真 的 是 性 能 瓶颈 呢 ， 还 是 只 有 理论 上 的 性 能 下 降 呢 ? 只 有 这 样 ， 有 具备 了 
真实 有 效 的 性 能 测评 (参见 第 6 章 )， 在 这 些 识别 出 来 的 关键 区 域 分 离 出 Promise 才 是 审慎 
负责 的 。 


Promise 稍 慢 一 些 ， 但 是 作为 交换 ， 你 得 到 的 是 大 量 内 建 的 可 信任 性 、 对 Zalgo 的 避免 以 及 
可 组 合 性 。 可 能 局 限 性 实际 上 并 不 是 它们 的 真实 表现 ， 而 是 你 缺少 发 现 其 好 处 的 眼光 呢 ? 
























































3.9 小 结 
Promise 非常 好 ， 请 使 用 。 它 们 解决 了 我 们 因 只 用 回调 的 代码 而 备 受 困 扰 的 控制 反 转 问题 。 














它们 并 没有 按 弃 回调 ， 只 是 
的 中 介 机 制 。 

Promise 链 也 开始 提供 (尽管 并 不 完美 ) 以 顺序 的 方式 表达 异步 流 的 一 个 更 好 的 方法 ， 这 
有 助 于 我 们 的 大 脑 更 好 地 计划 和 维护 异步 JavaScript 代码 。 我 们 将 在 第 4 章 看 到 针对 这 个 
问题 的 一 种 更 好 的 解决 方案 ! 


CH 





回调 的 安排 转交 给 了 一 个 位 于 我 们 和 其 他 工具 之 间 的 可 信任 
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在 第 2 章 里 ， 我 们 确定 了 用 回调 表达 异步 控制 流程 的 两 个 关键 缺陷 : 


。 基于 回调 的 异步 不 符合 大 脑 对 任务 步骤 的 规划 方式 ; 
。 由 于 控制 反 转 ， 回 调 并 不 是 可 信任 或 可 组 合 的 。 

















在 第 3 章 里 ， 我 们 详细 介绍 了 Promise 如 何 把 回调 的 控制 反 转 反 转 回来 ， 恢 复 了 可 信任 性 / 
可 组 合 性 。 











现在 我 们 把 注意 力 转移 到 一 种 顺序 、 看 似 同 步 的 异步 流程 控制 表达 风格 。 使 这 种 风格 成 为 
可 能 的 “魔法 ”就 是 ES6 生成 器 (generator)。 


4.1 打破 完整 运行 


在 第 1 章 中 ， 我 们 解释 了 JavaScript 开发 者 在 代码 中 几乎 普遍 依赖 的 一 个 假定 : 一 个 函数 
一 旦 开始 执行 ， 就 会 运行 到 结束 ， 期 间 不 会 有 其 他 代码 能 够 打 断 它 并 插入 其 间 。 











可 能 看 起 来 似乎 有 点 奇怪 ， 不 过 ES6 引入 了 一 个 新 的 函数 类 型 ， 它 并 不 符合 这 种 运行 到 结 
东 的 特性 。 这 类 新 的 函数 被 称 为 生成 器 。 
考虑 如 下 这 个 例子 来 了 解 其 含义 : 

var x = 1; 

function foo() { 


X++; 
bar(); // <-- 这 一 行 是 什么 作用 














> 
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console.log( "x:", x ); 


} 
function bar() { 
X++; 
} 
foo(); // X33 
在 这 个 例子 中 ， 我 们 确信 bar() 会 在 x++ 和 console.log(x) 之 间 运 行 。 但 是 ， 如 果 bar() 
并 不 在 那里 会 怎样 呢 ? 显然 结果 就 会 是 2， 而 不 是 3。 























现在 动脑 筋 想 一 下 。 如 果 bar() 并 不 在 那儿 ， 但 出 于 某 种 原因 它 仍然 可 以 在 xt+ 和 
consote.1og(x) 语句 之 间 运行， 这 又 会 怎样 呢 ? 这 如 何 才 会 成 为 可 能 呢 ? 











如 果 是 在 抢占 式 多 线程 语言 中 ， 从 本 质 上 说 ， 这 是 可 能 发 生 的 ，bar() 可 以 在 两 个 语句 
之 间 打 断 并 运行 。 但 JavaScript 并 不 是 抢占 式 的 ，( 目 前 ) 也 不 是 多 线程 的 。 然 而 ， 如 果 
foo() 自身 可 以 通过 某 种 形式 在 代码 的 这 个 位 置 指示 和 暂停 的 话 ， 那 就 仍然 可 以 以 一 种 合作 
式 的 方式 实现 这 样 的 中 断 〈 并 发 ) 。 









































这 里 我 之 所 以 使 用 了 “合作 式 的 ”一 词 ， 不 只 是 因为 这 与 经 典 并 发 术语 之 间 
的 关联 (参见 第 1 章 ) ， 还 因为 你 将 会 在 下 一 段 代 码 中 看 到 的 ，ES6 代码 中 
指示 暂停 点 的 语法 是 yteLd， 这 也 礼貌 地 表达 了 一 种 合作 式 的 控制 放弃 。 





























下 面 是 实现 这 样 的 合作 式 并 发 的 ES6 代码 : 





Var X= 1; 


function *foo() { 
X++; 
yield; // 暂停 ! 
console.log( "x:", x ); 


有 


function bar() { 
X++; 


} 


很 可 能 你 看 到 的 其 他 多 数 JavaScript 文档 和 代码 中 的 生成 器 声明 格式 都 是 
function* foo() { .. }， 而 不 是 我 这 里 使 用 的 function *foo() { .. }: 
唯一 区 别 是 * 位 置 的 风格 不 同 。 这 两 种 形式 在 功能 和 语法 上 都 是 等 同 的 ， 还 
有 一 种 是 function*foo(){ .. } (没有 空格 ) 也 一 样 。 两 种 风格 ， 各 有 优 
缺 ， 但 总 体 上 我 比较 喜欢 function *foo.. 的 形式 ， 因 为 这 样 在 使 用 *foo( ) 
来 引用 生成 器 的 时 候 就 会 比较 一 致 。 如 果 只 用 foo() 的 形式 ， 你 就 不 会 清楚 
知道 我 指 的 是 生成 器 还 是 常规 函数 。 这 完全 是 一 个 风格 偏好 问题 。 
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现在 ， 我 们 要 如 何 运行 前 面 的 代码 片段 ， 使 得 bar() 在 *foo() 内 部 的 yield 处 执行 呢 ? 





// 构造 一 个 迭代 器 it 来 控制 这 个 生成 器 


var it = foo(); 














// 这 里 启动 foo()1 








it.next(); 

x; 以 
bar(); 

Xx; // 3 
it.next(); /Xi 


好 吧 ， 这 两 段 代码 中 有 很 多 新 知识 ， 可 能 会 让 人 迷惑 ， 所 以 这 里 有 很 多 东西 需要 学 习 。 在 
解释 ES6 生成 器 的 不 同 机 制 和 语法 之 前 ， 我 们 先 来 看 看 运行 过 程 。 


(1)it = foo() 运算 并 没有 执行 生成 器 *foo()， 而 只 是 构造 了 一 个 迭代 器 (iterator) ， 这 个 
迭代 器 会 控制 它 的 执行 。 后 面 会 介绍 从 代 器 。 

(2) 第 一 个 it.next() 启动 了 生成 器 *foo()， 并 运行 了 *foo() 第 一 行 的 x++。 

(3)*foo() 在 yield 语句 处 和 暂停， 在 这 一 点 上 第 一 个 it.next() 调用 结束 。 此 时 *foo() 仍 

在 运行 并 且 是 活跃 的 ， 但 处 于 暂停 状态 。 

(4) 我 们 查看 x 的 值 ， 此 时 为 2。 

(5) 我 们 调用 bar()， 它 通过 x++ 再 次 递增 x。 

(6) 我 们 再 次 查看 x 的 值 ， 此 时 为 3。 

(7) 最 后 的 it.next() 调用 从 暂停 处 恢复 了 生成 器 *foo() 的 执行 ， 并 运行 console.1log(..) 
语句 ， 这 条 语句 使 用 当前 x 的 值 3。 






















































































显然 ，foo() 启动 了 ， 但 是 没有 完整 运行 ， 它 在 yield 处 暂停 了 。 后 面 恢复 了 foo() 并 让 它 
运行 到 结束 ， 但 这 不 是 必需 的 。 


因此 ， 生 成 器 就 是 一 类 特殊 的 函数 ， 可 以 一 次 或 多 次 启动 和 停止 ， 并 不 一 定 非 得 要 完成 。 
尽管 现在 还 不 是 特别 清楚 它 的 强大 之 处 ， 但 随 着 对 本 章 后 续 内 容 的 深入 学 习 ， 我 们 会 看 到 
它 将 成 为 用 于 构建 以 生成 器 作为 异步 流程 控制 的 代码 模式 的 基础 构件 之 一 。 


4.1.1 输入 和 输出 

生成 器 函数 是 一 个 特殊 的 函数 ， 具 有 前 面 我 们 展示 的 新 的 执行 模式 。 但 是 ， 它 仍然 是 一 个 
函数 ， 这 意味 着 它 仍 然 有 一 些 基 本 的 特性 没有 改变 。 比 如 ， 它 仍然 可 以 接受 参数 ( 即 输 
入 )， 也 能 够 返回 值 ( 即 输出 )。 


























function *foo(x,y) { 
return x * y; 


} 


var it = foo( 6, 7 ); 





var res = it.next(); 


res.value; // 42 
我 们 向 *foo(..) 传 入 实 参 6 和 7 分别 作为 参数 x 和 y。*foo(..) 向 调用 代码 返回 42。 


现在 我 们 可 以 看 到 生成 器 和 普通 函数 在 调用 上 的 一 个 区 别 。 显 然 foo(6,7) 看 起 来 很 熟悉 。 
但 难以 理解 的 是 ， 生 成 器 *foo(..) 并 没有 像 普 通 函 数 一 样 实际 运行 。 





























事实 上 ， 我 们 只 是 创建 了 一 个 迭代 器 对 象 ， 把 它 赋 给 了 一 个 变量 it， 用 于 控制 生成 器 
*foo(..)。 然 后 调用 it.next()， 指 示 生 成 器 *foo(..) 从 当前 位 置 开 始 继续 运行 ， 停 在 下 
一 个 yield 处 或 者 直到 生成 器 结束 。 











这 个 next(..) 调用 的 结果 是 一 个 对 象 ， 它 有 一 个 value 属性 ， 持 有 从 *foo(..) 返回 的 值 
(如 果 有 的 话 )。 换 句 话 说，yield 会 导致 生成 器 在 执行 过 程 中 发 送出 一 个 值 ， 这 有 点 类 似 
于 中 间 的 return。 



































目前 还 不 清楚 为 什么 需要 这 一 整个 间接 迭代 器 对 象 来 控制 生成 器 。 会 清楚 的 ， 我 保证 。 


1. 迭代 消息 传递 
除了 能 够 接受 参数 并 提供 返回 值 之 外 ， 生 成 器 其 至 提供 了 更 强大 更 引 人 注 目的 内 建 消息 输 
入 输出 能 力 ， 通 过 yield 和 next(..) 实现 。 


考虑 : 




















function *foo(x) { 
var y = x * (yield); 
return y; 


} 
var it = foo( 6 ); 


// 启动 foo(..) 


it.next(); 
var res = it.next( 7 ); 
res.value;  //42 
首先 ， 传 入 6 作为 参数 x。 然 后 调用 it.next()， 这 会 启动 *foo(..)。 
在 *foo(..) 内 部 ， 开 始 执行 语句 var y = x ..， 但 随后 就 遇 到 了 一 个 yield 表达 式 。 它 
就 会 在 这 一 点 上 暂停 *foo(..) (在 赋值 语句 中 间 ! )， 并 在 本 质 上 要 求 调用 代码 为 yield 


表达 式 提供 一 个 结果 值 。 接 下 来 ， 调 用 it.next( 7 )， 这 一 名 把 值 7 传 回 作为 被 暂停 的 
yield 表达 式 的 结果 。 
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所 以 ， 这 时 赋值 语句 实际 上 就 是 var y = 6 * 7。 现 在 ，return y 返 回 值 42 作为 调用 
it.next( 7 ) 的 结果 。 

注意 ， 这 里 有 一 点 非常 重要 ， 但 即使 对 于 有 经 验 的 JavaScript 开发 者 也 很 有 迷惑 性 : 根据 
你 的 视角 不 同 ，yield 和 next(..) 调用 有 一 个 不 匹配 。 一 般 来 说 ， 需 要 的 next(..) 调用 要 
比 yield 语句 多 一 个 ， 前 面 的 代码 片段 有 一 个 yieLd 和 两 个 next(..) 调用 。 

为 什么 会 有 这 个 不 匹配 ? 

因为 第 一 个 next(..) 总 是 启动 一 个 生成 器 ， 并 运行 到 第 一 个 yield 处 。 不 过 ， 是 第 二 个 
next(..) 调用 完成 第 一 个 被 暂停 的 yield 表达 式 ， 第 三 个 next(..) 调用 完成 第 二 个 yield， 
2. 两 个 问题 的 故事 

实际 上 ， 你 首先 考虑 的 是 哪 一 部 分 代码 将 会 影响 这 个 不 匹配 是 否 被 察觉 到 。 

只 考虑 生成 器 代码 : 


var y = x * (yield); 
return y; 





第 一 个 yield 基本 上 是 提出 了 一 个 问题 :“ 这 里 我 应 该 插入 什么 值 ?” 








谁 来 回答 这 J 第 一 个 next() 已 经 运行 ， 使 得 生成 器 启动 并 运行 到 此 处 ， 所 以 显 
然 它 无 法 回答 这 个 问题 。 因 此 必须 由 第 二 个 next(..) 调用 回答 第 一 个 yield 提出 的 这 个 
问题 











看 到 不 匹配 了 吗 一 第 二 个 对 第 一 个 ? 
把 视角 转化 一 下 ; 不 从 生成 器 的 视角 看 这 个 问题 ， 而 是 从 迭代 器 的 角度 。 


为 了 恰当 阐述 这 个 视角 ， 我 们 还 需要 解释 一 下 : 消息 是 双向 传递 的 一 一 yield.. 作为 一 个 
表达 式 可 以 发 出 消息 响应 next(..) 调用 ，next(..) 也 可 以 向 暂停 的 yield 表达 式 发 送 值 。 
考虑 下 面 这 段 稍稍 调整 过 的 代码 





























function *foo(x) { 
var y = x * (yield "Hello"); // <-- yield 一 个 值 | 
return y; 


var it = foo( 6 ); 


var res = it.next();  // 第 一 个 next(), 并 不 传 入 任何 东西 


res.value; // "Hello" 





res = it.next( 7 ); // 向 等 待 的 yield 传 入 7 
res.value; // 42 





yield .. 和 next(..) 这 一 对 组 合 起 来 ， 在 生成 器 的 执行 过 程 中 构成 了 一 个 双向 消息 传递 系统 。 
那么 只 看 下 面 这 一 段 选 代 器 代码 ; 


var res = it.next(); // 第 一 个 next() ,并 不 传人 任何 东西 








res.value; // "Hello" 
res = it.next( 7 ); // 向 等 待 的 yteLd 传 人 7 
res.value; // 42 


我 们 并 设 有 向 第 一 个 next() 调用 发 送 值 ， 这 是 有 意 为 之 。 只 有 和 暂停 的 yield 
才能 接受 这 样 一 个 通过 next(..) 传递 的 值 ， 而 在 生成 器 的 起 始 处 我 们 调用 
第 一 个 next() 时 ， 还 没有 和 暂停 的 yield 来 接受 这 样 一 个 值 。 规 范 和 所 有 兼 

容 浏 览 器 都 会 默默 丢弃 传递 给 第 一 个 next() 的 任何 东西 。 传 值 过 去 仍然 不 
是 一 个 好 思路 ， 因 为 你 创建 了 沉默 的 无 效 代 码 ， 这 会 让 人 迷惑 。 因 此 ， 启 动 
生成 器 时 一 定 要 用 不 带 参数 的 next()。 


























第 一 个 next() 调用 (没有 参数 的 ) 基本 上 就 是 在 提出 一 个 问题 “生成 器 *foo( . .) 要 给 我 
的 下 一 个 值 是 什么 "。 谁 来 回答 这 个 问题 昵 ? 第 一 个 yield "hetto" 表达 式 。 


看 见 了 吗 ? 这 里 没有 不 匹配 。 
根据 你 认为 提出 问题 的 是 谁 ，yield 和 next(..) 调用 之 间 要 么 有 不 匹配 ， 要 么 没有 。 











但 是 ， 稍 等 ! 与 yield 语句 的 数量 相 比 ， 还 是 多 出 了 一 个 额外 的 next()。 所 以 ， 最 后 一 个 
it.next(7) 调用 再 次 提出 了 这 样 的 问题 : 生成 器 将 要 产生 的 下 一 个 值 是 什么 。 但 是 ， 再 没 
有 yield 语句 来 回答 这 个 问题 了 ， 是 不 是 ? 那么 谁 来 回答 呢 ? 























return 语句 回答 这 个 问题 ! 


如 果 你 的 生成 器 中 没有 return 的 话 一 一 在 生成 器 中 和 在 普通 函数 中 一 样 ，return 当然 不 
是 必需 的 一 一 总 有 一 个 假定 的 / 隐 式 的 return; (也 就 是 return undefined; ) ， 它 会 在 默认 
情况 下 回答 最 后 的 it.next(7) 调用 提出 的 问题 。 








这 样 的 提问 和 回答 是 非常 强大 的 : 通过 yield 和 next(..) 建立 的 双向 消息 传递 。 但 目前 还 
不 清楚 这 些 机 制 是 如 何 与 异步 流程 控制 联系 到 一 起 的 。 会 清楚 的 | 


4.1.2 ”多 个 迭代 器 

从 语法 使 用 的 方面 来 看 ， 通 过 一 个 从 代 器 控制 生成 器 的 时 候 ， 似 乎 是 在 控制 声明 的 生成 器 
函数 本 身 。 但 有 一 个 细微 之 处 很 容易 忽略 : 每 次 构建 一 个 选 代 器 ， 实 际 上 就 隐 式 构建 了 生 
成 器 的 一 个 实例 ， 通 过 这 个 选 代 器 来 控制 的 是 这 个 生成 器 实例 。 


同一 个 生成 器 的 多 个 实例 可 以 同时 运行 ， 它 们 甚至 可 以 彼此 交互， 
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function *foo() { 
var x = yield 2; 
Z++; 
var y = yield (x * 2z); 
console.log( x, y, z ); 


} 
Var z = 1; 
var it1 = foo(); 
var it2 = foo(); 
var vall = it1.next().value; // 2 <-- yield 2 
var val2 = it2.next().value; // 2 <-- yield 2 
vall = iti.next( val2 * 10 ).value; // 40 <-- x:20, z:2 
val2 = it2.next( vall * 5 ).value; // 600 <-- x:200, Zz:3 
iti.next( val2 / 2 ); // y:300 
// 20 300 3 
it2.next( vall1 / 4 ); // y:10 
// 200 10 3 


同一 个 生成 器 的 多 个 实例 





并 发 运行 的 最 常用 处 并 不 是 这 样 的 交互 ， 而 是 生成 





器 在 没有 输入 的 情况 下 ， 可 能 从 某 个 独立 连接 的 资源 产生 自己 的 值 。 下 一 市 





中 我 们 会 详细 介绍 值 产 生 。 


我 们 简单 梳理 一 下 执行 流程 。 





(1)*foo() 的 两 个 实例 同时 启动 ， 两 个 next() 分 别 从 yield 2 语句 得 到 值 2。 


(2)val2 * 10 也 就 是 2 * 10， 发 送 到 和 全 





第 一 个 生成 器 实例 it1， 
加 到 2， 然后 20 * 2 通过 yield 发 出 ,将 vall 设置 为 49。 
(3)vall * 5 也 就 是 46 * 5， 发 送 到 第 二 个 生成 器 实例 it2， 


因此 x 得 到 值 22。z 从 1 增 


因此 x 得 到 值 26。z 再 次 从 2 


递增 到 3， 然 后 200 * 3 通过 yield 发 出 ， 将 val? 设置 为 609。 


(4) val2 / 2 也 就 是 666 / 2， 
出 x y z 的 值 分 别 是 29 300 3。 
(5)val1l / 4 也 就 是 46 / 4， 发 送 到 第 

x y z 的 值 分 别 为 200 10 3。 


发 送 到 第 一 个 生成 器 实例 it1， 


二 个 生成 器 实例 it2， 


因此 y 得 到 值 306， 然 后 打印 








因此 y 得 到 值 89， 然后 打印 出 








在 脑海 中 运行 一 遍 这 个 例子 很 有 趣 。 理 清楚 了 吗 ? 
交替 执行 
回想 一 下 1.3 节 中 关于 完整 运行 的 这 个 场景 ， 
var a = 1; 
Var bb = 23 
240 | 第 4 章 


function foo() { 


at+; 
b = a; 
a=b+3; 

} 

function bar() { 
b= 
a=8+Db; 
b=a* 2; 


如 果 是 普通 的 JavaScript 函数 的 话 ， 显 然 ， 要 么 是 foo() 首先 运行 完毕 ， 要 么 是 bar() 首 
先 运 行 完毕 ， 但 foo() 和 bar() 的 语句 不 能 交替 执行 。 所 以 ， 前 面 的 程序 只 有 两 种 可 能 的 
输出 。 


但 是 ， 使 用 生成 器 的 话 ， 交 替 执 行 (其 至 在 语句 当中 ! ) 显然 是 可 能 的 ， 














var a 
var b 


1; 
2 


function *foo() { 


at+; 
yield; 
b=b* ai 
a = (yield b) + 3; 
} 
function *bar() { 
yield; 
a= (yield 8) + b; 
b= a* (yield 2); 


} 
根据 友 代 器 控制 的 *foo() 和 *bar() 调用 的 相对 顺序 不 同 ， 前 面 的 程序 可 能 会 产生 多 种 不 
同 的 结果 。 换 句 话 说， 通过 两 个 生成 辟 在 共享 的 相同 变量 上 的 和 友 代 交替 执行 ， 我 们 实际 上 
可 以 〈 以 某 种 模拟 的 方式 ) 印证 第 1 章 讨论 的 理论 上 的 多 线程 竞 态 条 件 环境 。 






























































首先 ， 来 构建 一 个 名 为 step(…) 的 辅助 函数 ， 用 于 控制 选 代 器 : 


function step(gen) { 
var it = gen(); 
var last; 


return function() { 
// 不 管 yieLd 出 来 的 是 什么 ,下 一 次 都 把 它 原样 传 回去 ! 


Last = it.next( Last ) .vaLue; 

















$s 
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step( . 





候 会 将 和 迭代 器 向 前 进 代 一 步 。 另 外 ， 前 耳 











yield 8 就 是 8， 而 yield b 就 是 b (yield 发 出 时 的 值 


.) 初始 化 了 一 个 生成 器 来 创建 迭代 器 让 ， 然 后 返回 一 
[的 yield 发 日 


个 函数 ， 这 个 函数 被 调用 的 时 
8 的 值 会 在 下 一 步 发 送 回去 。 于 是 ， 
六 

















现在 ， 只 是 为 了 好 玩 ， 我 们 来 试验 一 下 交替 运行 *foo() 和 *bar() 代码 块 的 效果 。 我 们 从 





乏味 的 基本 情况 开始 


人 
1; 
25 





s1 = step( foo ); 
s2 = step( bar ); 





// 首次 运行 *foo() 
s1(); 
s1(); 
s1(); 

















// 现在 运行 *bar() 


























s2(); 

s2(); 

s2(); 

s2(); 

console.log( a, b ); // 11 22 
最 后 的 结果 是 11 和 22， 和 第 1 章 中 的 版 本 一 样 。 
如 何 改变 的 : 

// 确保 重新 设置 3 和 b 

全 人 

b = 

var s1 = step( foo ); 

var S2 = step( bar ); 

s2(); /be 

s2(); // yield 8 

s1(); // att; 

52()3 //a=8+b; 

// yield 2 
s1(); //b=b* ai 
// yield b 

s1(); //a=b+3; 

s2(); //b=a*2; 
在 告诉 你 结果 之 前 ， 你 能 推断 出 前 面 的 程序 运行 后 a 

console.log( a, b ); // 12 18 


台 ， 确 保 *foo() 在 *bar() 之 前 完全 结束 (和 


现在 交替 执行 


第 1 章 中 做 的 一 样 ) : 


了 顺序 ， 看 看 a 和 bp 的 值 是 





和 b 的 值 吗 ? 不 要 作弊 ! 





作为 留 给 大 家 的 练习 ， 请 试 着 重新 安排 s1() 和 s2() 的 调用 顺序 ， 看 看 还 能 
够 得 到 多 少 种 结果 组 合 。 不 要 忘 了 ， 你 总 是 需要 3 次 s1() 调用 和 4 次 s2() 
调用 。 回 忆 一 下 前 面 关于 next() 和 ytetd 匹配 的 讨论 ， 想 想 为 什么 。 














当然 ， 你 基本 不 可 能 故意 创建 让 人 迷惑 到 这 种 程度 的 交替 运行 实际 代码 ， 因 为 这 给 理解 代 
码 带 来 了 极 大 的 难度 。 但 这 个 练习 很 有 趣 ， 对 于 理解 多 个 生成 器 如 何在 共享 的 作用 域 上 并 
发 运行 也 有 指导 意义 ， 因 为 这 个 功能 有 很 多 用 武之 地 。 


























我 们 将 在 4.6 节 中 更 深入 讨论 生成 器 并 发 。 


4.2 生成 器 产生 值 

在 前 面 一 节 中 ， 我 们 提 到 生成 器 的 一 种 有 趣 用 法 是 作为 一 种 产生 值 的 方式 。 这 并 不 是 本 章 
的 重点 ， 但 是 如 果 不 介 绍 一 些 基 础 的 话 ， 就 会 缺乏 完整 性 了 ， 特 别 是 因为 这 正 是 “生成 
器 ”这 个 名 称 最 初 的 使 用 场景 。 























下 面 要 偏 一 下 题 ， 先 介绍 一 点 选 代 器 ， 不 过 我 们 还 会 回来 介绍 它们 与 生成 器 的 关系 以 及 如 
何 使 用 生成 器 来 生成 值 。 


4.2.1 生产 者 与 迭代 器 
假定 你 要 产生 一 系列 值 ， 其 中 每 个 值 都 与 前 面 一 个 有 特定 的 关系 。 要 实现 这 一 点 ， 需 要 一 
个 有 状态 的 生产 者 能 够 记 住 其 生成 的 最 后 一 个 值 。 


可 以 实现 一 个 直接 使 用 函数 闭 包 的 版 本 (参见 本 系列 的 《你 不 知道 的 JavaScript (上 卷 )》 
的 “作用 域 和 闲 包 ”部 分 )， 类 似 如 下 : 




















var gimmeSomething = (function(){ 
Var nextVal; 


return function(){ 


if (nextVal === undefined) { 
nextVal = 1; 
} 
else { 
nextVal = (3 * nextVal) +6; 
} 
return nextVal; 
由 
DO; 
gimmeSomething(); pe al 
gimmeSomething(); // 9 
gimmeSomething(); /7 33 
gimmeSomething(); // 105 





生成 器 | 243 


这 里 nextVal 的 计算 逻辑 已 经 简化 了 ， 但 是 从 概念 上 说 ， 我 们 希望 直到 下 一 
次 gimmeSomething() 调用 发 生 时 才 计 算 下 一 个 值 ( 即 nextVal)。 否 则 ， 一 
般 来 说 ， 对 更 持久 化 或 比 起 简单 数字 资源 更 受 限 的 生产 者 来 说 ， 这 可 能 就 是 
资源 泄漏 的 设计 。 

















生成 任意 数字 序列 并 不 是 一 个 很 实际 的 例子 。 但 如 果 是 想 要 从 数据 源 生成 记录 呢 ?” 可 以 采 
用 基本 相同 的 代码 。 


实际 上 ， 这 个 任务 是 一 个 非常 通用 的 设计 模式 ， 通 汕 通 过 迭代 器 来 解决 。 选 代 器 是 一 个 定 
义 良 好 的 接口 ， 用 于 从 一 个 生产 者 一 步 步 得 到 一 系列 值 。JavaScript 迭代 器 的 接口 ， 与 多 
数 语言 类 似 ， 就 是 每 次 想 要 从 生产 者 得 到 下 一 个 值 的 时 候 调 用 next()。 


可 以 为 我 们 的 数字 序列 生成 器 实现 标准 的 选 代 器 接口 : 


var something = (function(){ 
var nextVal; 


return { 
// for. .of 循环 需要 
[SymbolL.iterator]: function(){ return this; }， 


// 标准 迭代 器 接口 方法 


next: function(){ 


if (nextVal === undefined) { 
nextVal = 1; 
} 
else { 
nextVal = (3 * nextVal) + 6; 
} 
return { done:false, value:nextVal }; 
} 
}; 
DO; 
something.next().value; jf 
something.next().value; // 9 
something.next().value; // 33 
something.next().value; // 105 


我 们 将 在 4.2.2 节 解 释 为 什么 在 这 段 代 码 中 需要 [Symbol.iterator]: .. 这 
一 部 分 。 从 语法 上 说 ， 这 涉及 了 两 个 ES6 特性 。 首 先 ，[ .，] 语法 被 称 为 
计算 属性 名 (参见 本 系列 的 《你 不 知道 的 JavaScript (上 卷 )》 的 “this 和 
对 象 原型 ”部 分 )。 这 在 对 象 术语 定义 中 是 指 ， 指 定 一 个 表达 式 并 用 这 个 表 
达 式 的 结果 作为 属性 的 名 称 。 另 外 ，Symbol.iterator 是 ES6 预定 义 的 特殊 
Symbol 值 之 一 (参见 本 系列 的 《你 不 知道 的 JavaScript (下 卷 )》 的 “ES6 
以 Beyond” 部 分 )。 




















next() 调用 返回 一 个 对 象 。 这 个 对 象 有 两 个 属性 : done 是 一 个 boolean 值 ， 标 识 选 代 器 的 
完成 状态 ，value 中 放置 迭代 值 。 


ES6 还 新 增 了 一 个 for. .of 循环 ， 这 意味 着 可 以 通过 原生 循环 语法 自动 迭代 标准 选 代 器 : 





for (var v of something) { 
console.log( v ); 


// 不 要 死 循 环 ! 
if (v > 500) { 
break; 

} 
} 
// 1 9 33 105 321 969 


因为 我 们 的 迭代 器 something 总 是 返回 done:false， 因 此 这 个 for. .of 循环 
将 永远 运行 下 去 ， 这 也 就 是 为 什么 我 们 要 在 里 面 放 一 个 break 条件。 迭代 器 
永 不 结束 是 完全 没 问 题 的 ， 但 是 也 有 一 些 情况 下 ， 和 迭代 器 会 在 有 限 的 值 集合 
上 运行 ， 并 最 终 返 回 done:true。 











for..of 循环 在 每 次 迭代 中 自动 调用 next()， 它 不 会 向 next() 传人 任何 值 ， 并 且 会 在 接收 
到 done:true 之 后 自动 停止 。 这 对 于 在 一 组 数据 上 循环 很 方便 。 








| 


然 ， 也 可 以 手工 在 迭代 器 上 循环 ， 调 用 next() 并 检查 done:true 条 件 来 确定 何 时 停止 循 


了 


for ( 

var ret; 

(ret = something.next()) && !ret.done; 
){ 


console.log( ret.valuye ); 


// 不 要 死 循 环 ! 
if (ret.value > 500) { 
break; 


} 


} 
// 1 9 33 105 321 969 





这 种 手工 for 方法 当然 要 比 ES6 的 for..of 循环 语法 丑陋 ， 但 其 优点 是 ， 这 
样 就 可 以 在 需要 时 向 next() 传递 什 。 








除了 构造 自己 的 选 代 器 ， 许 多 JavaScript 的 内 建 数 据 结构 (从 ES6 开始 ) ， 比 如 array， 也 
有 默认 的 迭代 器 : 
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Var ‘ars [L357;9.] 


for (var v of a) { 
console.log( v ); 


//13579 


or. .of 循环 向 a 请 求 它 的 选 代 器 ， 并 自动 使 用 这 个 迭代 器 迭代 遍历 a 的 值 。 





这 里 可 能 看 起 来 像 是 ES6 一 个 奇怪 的 缺失 ， 不 过 一 般 的 object 是 故意 不 
像 array 一 样 有 默认 的 返 代 器 。 这 里 我 们 并 不 会 深入 探讨 其 中 的 缘由 。 如 
果 你 只 是 想 要 迭代 一 个 对 象 的 所 有 属性 的 话 (不 需要 保证 特定 的 顺序 )， 可 

以 通过 0bject.keys(..) 返 回 一 个 array， 类 似 于 for (var k of 0bject. 
keys(obj)) { .. 这 样 使 用 。 这 样 在 一 个 对 象 的 键 值 上 使 用 for. .of 循环 与 
for. .in 循环 类 似 ， 除 了 0bject.keys(..) 并 不 包含 来 自 于 [[Prototype]] 链 
上 的 属性 ， 而 for..in 则 包含 (参见 本 系列 的 《你 不 知道 的 JavaScript (上 
卷 )》 的 “this 和 对 象 原型 ”部 分 )。 














4.2.2 iterable 


前 面 例子 中 的 something 对 象 叫 作 选 代 器 ， 因 为 它 的 接口 中 有 一 个 next() 方法 。 而 与 其 紧 
密 相关 的 一 个 术语 是 iterable (可 和 迭代 )， 即 指 一 个 包含 可 以 在 其 值 上 迭代 的 迭代 器 的 对 象 。 





从 ES6 开始 ， 从 一 个 iterable 中 提取 和 运 代 器 的 方法 是 : iterable e 必须 支持 一 个 函数 ， 其 名 称 
是 专门 的 ES6 符号 值 Symbol.iterator。 调 用 这 个 函数 时 ， 它 会 返回 一 个 迭代 器 。 通 常 每 
次 调用 会 返回 一 个 全 新 的 迭代 器 ， ep ee 





前 面 代码 片段 中 的 a 就 是 一 个 iterable。for. .of 循环 自动 调用 它 的 Symbol.iterator 函数 来 
构建 一 个 妈 代 器 。 我 们 当然 也 可 以 手工 调用 这 个 函数 ， 然 后 使 用 它 返 回 的 返 代 器 














Var a=" [1 3555729]: 
var it = a[SymboL.iterator](); 
it.next().value; 27 


it.next().value; // 3 
it.next().value; ¥/- 址 





前 面 的 代码 中 列 出 了 定义 的 something， 你 可 能 已 经 注意 到 了 这 一 行 : 











[Symbol.iterator]: function(){ return this; } 


这 段 有 点 令 人 疑惑 的 代码 是 在 将 something 的 值 (迭代 器 something 的 接口 ) 也 构建 成 为 一 
个 iterable。 现 在 它 既 是 iterable， 也 是 进 代 器 。 然 后 我 们 把 something 传 给 for. .of 循环 : 





for (var v of something) { 


} 


for. .of 循环 期 望 something 是 iterable， 于 是 它 寻 找 并 调用 它 的 Symbol.iterator 国 数 。 
我 们 将 这 个 函数 定义 为 就 是 简单 的 return this， 也 就 是 把 自身 返回 ， 而 for. .of 循环 并 





不 知情 。 


4.2.3 生成 器 和 迭代 器 


了 解 了 返 代 器 的 背景 ， 让 我 们 把 注意 力 转 回 生成 器 上 。 可 以 把 生成 器 看 作 一 个 值 的 生产 





者 ， 我 们 通过 迭代 器 接口 的 next() 调用 一 次 提取 出 一 个 值 。 


所 以 ， 严 格 说 来 ， 生 成 器 本 身 并 不 是 iterable， 尽 管 非常 类 似 一 一 当 你 执行 


得 到 了 一 个 达 代 器 
function *foo(){ .. } 


var it = foo(); 


可 以 通过 生成 器 实现 前 面 的 这 个 something 无 限 数字 序列 生产 者 ， 类 似 这 样 : 


function *something() { 
Var nextVal; 


while (true) { 
if (nextVal === undefined) { 
nextVal = 1; 
} 
else { 
nextVal = (3 * nextVal) + 6; 
} 


yield nextVal; 











一 个 生成 器 ， 就 



































回 到 主 程序 或 事件 循环 队列 中 。 简 单 地 说 就 是 :“ 生 成 器 把 whil 
了 JavaScript 编程 的 世界 ! ” 




















这 样 就 简单 明确 多 了 ， 是 不 是 ? 因为 生成 器 会 在 每 个 yield 处 暂停 ， 函 数 
状态 〈 作 用 域 ) 会 被 保持 ， 即 意味 着 不 需要 闭 包 在 调用 之 间 保 持 变量 状态 


通常 在 实际 的 JavaScript 程序 中 使 用 while. .true 循环 是 非常 精 糕 的 主意 ， 至 
少 如 果 其 中 设 有 break 或 return 的 话 是 这 样 ， 因 为 它 有 可 能 会 同步 地 无 限 循 
环 ， 并 阻塞 和 锁 住 浏览 器 UI。 但 是 ， 如 果 在 生成 器 中 有 yield 的 话 ， 使 用 这 
样 的 循环 就 完全 没有 问题 。 因 为 生成 器 会 在 每 次 进 代 中 暂停 ， 通 过 yield 返 





e..true 带 回 





*something() 的 
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这 段 代码 不 仅 更 简洁 ， 我 们 不 需要 构造 自己 的 迭代 器 接口 ， 实 际 上 也 更 合理 ， 因 为 它 更 
晰 地 表达 了 意图 。 比 如 ，white. .true 循环 告诉 我 们 这 个 生成 器 就 是 要 永远 运行 ， 只 要 我 
们 一 直 索 要 ， 它 就 会 一 直 生 成 值 。 


现在 ， 可 以 通过 for..of 循环 使 用 我 们 雕琢 过 的 新 的 *something() 生成 器 。 你 可 以 看 到 ， 
其 工作 方式 基本 是 相同 的 : 

















内 误 


























for (var v of something()) { 
console.log( v ); 


// 不 要 死人 循环 ! 
if (v > 500) { 
break; 


} 


// 1 9 33 105 321 969 


但 是 ， 不 要 忽略 了 这 段 for (var v of something()) .. | 我 们 并 不 是 像 前 面 的 例子 那样 把 
something 当 作 一 个 值 来 引用 ， 而 是 调用 了 *something() 生成 器 以 得 到 它 的 从 代 器 供 for.. 
of 循环 使 用 。 


如 果 认 真 思 考 的 话 ， 你 也 许 会 从 这 段 生 成 器 与 循环 的 交互 中 提出 两 个 问题 。 


。 为 什么 不 能 用 for (var v of something) .. ?因为 这 里 的 something 是 生成 器 ， 并 不 是 
iterable。 我 们 需要 调用 something() 来 构造 一 个 生产 者 供 for. .of 循环 达 代 。 

。 something() 调用 产生 一 个 迭代 器 ， 但 for. .of 循环 需要 的 是 一 个 iterable， 对 吧 ? 是 
的 。 生 成 器 的 迭代 器 也 有 一 个 Symbol.iterator 国 数 ， 基 本 上 这 个 函数 做 的 就 是 return 
this， 和 我 们 前 面 定 义 的 iterable something 一 样 。 换 句 话 说 ， 生 成 器 的 迭代 器 也 是 一 个 


iterable | 


停止 生成 器 

在 前 面 的 例子 中 ， 看 起 来 似乎 *something() 生成 器 的 迭代 器 实例 在 循环 中 的 break 调用 之 
后 就 永远 留 在 了 挂 起 状态 。 

其 实 有 一 个 隐藏 的 特性 会 帮助 你 管理 此 事 。for. .of 循环 的 “异常 结束 ”( 也 就 是 “提前 终 
“)， 通 常 由 break、return 或 者 未 捕获 异常 引起 ,会 向 生成 器 的 迭代 器 发 送 一 个 信号 使 
终止。 

















NM 





y 


严格 地 说 ， 在 循环 正常 结束 之 后 ，for. .of 循环 也 会 向 迭代 器 发 送 这 个 信号 。 
对 于 生成 器 来 说 ， 这 本 质 上 是 没有 意义 的 操作 ， 因 为 生成 器 的 迭代 器 需要 先 
完成 for. .of 循环 才能 结束 。 但 是 ， 自 定义 的 进 代 器 可 能 会 需要 从 for. .of 
循环 的 消费 者 那里 接收 这 个 额外 的 信号 。 











尽管 for. .of 循环 会 自动 发 送 这 个 信号 ， 但 你 可 能 会 希望 向 一 个 迭代 器 手工 发 送 这 个 信号 。 
可 以 通过 调用 return(..) 实现 这 一 点 。 








如 有 果 在 生成 器 内 有 try..finally 语句 ， 它 将 总 是 运行 ， 即 使 生成 器 已 经 外 部 结束 。 如 果 需 
要 清理 资源 的 话 (数据 库 连 接 等 )， 这 一 点 非常 有 用 : 


rz. 




















function *something() { 


try { 
var nextVal; 


while (true) { 


if (nextVal === undefined) { 
nextVal = 1; 
} 
else { 
nextVal = (3 * nextVal) + 6; 
} 
yield nextVal; 
} 
} 
// 清理 子 句 
finally { 
console.log( "cleaning up!" ); 


} 
} 


之 前 的 例子 中 ，for. .of 循环 内 的 break 会 触发 finally 语句 。 但 是 ， 也 可 以 在 外 部 通过 
return(..) 手工 终止 生成 右 的 迭代 器 实例 : 


var it = something(); 
for (var v of it) { 
console.log( v ); 


// 不 要 死人 循环 ! 
if (v > 500) { 
console. log( 
// 完成 生成 器 的 迭代 器 
it.return( "Hello World" ).value 
3 
// 这 里 不 需要 break 

















} 


// 1933 105 321 969 

// 清理 ! 

// Hello World 
调用 it.return(..) 之 后 ， 它 会 立即 终止 生成 器 ， 这 当然 会 运行 finally 语句 。 男 外 ， 它 
还 会 把 返回 的 value 设置 为 传 入 return(..) 的 内 容 ， 这 也 就 是 "Hello World" 被 传 出 
去 的 过 程 。 现 在 我 们 也 不 需要 包含 break 语句 了 ， 因 为 生成 器 的 迭代 器 已 经 被 设置 为 
done:true， 所 以 for. .of 循环 会 在 下 一 个 迭代 终止 。 
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生成 器 的 名 字 大 多 来 自 这 种 消费 生产 值 (consuming produced values) 的 用 例 。 但 是 ， 这 里 
要 再 次 申明 ， 这 只 是 生成 器 的 用 法 之 一 ， 坦 白地 说 ， 甚 至 不 是 这 本 书 重点 关注 的 用 途 。 


既然 对 生成 器 的 工作 机 制 有 了 更 完整 的 理解 ， 那 接 下 来 就 可 以 把 关注 转向 如 何 把 生成 器 应 
用 于 异步 并 发 了 。 
4.3 ”异步 迭代 生成 器 


生成 器 与 异步 编码 模式 及 解决 回调 问题 等 ， 有 什么 关系 呢 ? 让 我 们 来 回答 这 个 重要 的 
问题 。 














我 们 应 该 重新 讨论 第 3 章 中 的 一 个 场景 。 回 想 一 下 回调 方法 : 





function foo(x,y,cb) { 
ajax( 
"http://some.url.1/?x=" + X + "&y=" + y, 
cb 
); 
} 


foo( 11, 31, function(err,text) { 
if (err) { 
console.error( err ); 


} 
else { 
console.log( text ); 
} 
3 


如 果 想 要 通过 生成 器 来 表达 同样 的 任务 流程 控制 ， 可 以 这 样 实现 : 








function foo(x,y) { 
ajax( 
"http://some.url.1/?x=" + x + "&y=" + y， 
function(err ,data){ 
if (err) { 
// 向 xmain() 抛 出 一 个 错误 
it.throw( err ); 
} 
else { 
// 用 收 到 的 data 恢 复 *maiin() 
it.next( data ); 





} 
); 
} 


function *main() { 


try { 
var text = yield foo( 11, 31 ); 





console.log( text ); 


catch (err) { 
console.error( err ); 
J 
J 


var it = main(); 


// 这 里 启动 ! 
it.next(); 
第 一 眼看 上 去 ， 与 之 前 的 回调 代码 对 比 起 来 ， 这 上段 代码 更 长 一 些 ， 可 能 也 更 复杂 一 些 


但 是 ， 不 要 被 表面 现象 欺骗 了 ! 生成 器 代码 实际 上 要 好 得 多 | 不 过 要 解释 这 一 点 还 是 比 
较 复杂 的 。 
首先 ， 让 我 们 查看 一 下 最 重要 的 这 段 代码 : 


var text = yield foo( 11, 31 ); 
console.log( text ); 


请 先 花 点 时 间 思 考 一 下 这 段 代 码 是 如 何 工作 的 。 我 们 调用 了 一 个 普通 函数 foo(..)， 而 且 
显然 能 够 从 Ajax 调用 中 得 到 text， 即 使 它 是 异步 的 。 


么 可 能 呢 ? 如 果 你 回想 一 下 第 1 章 的 开始 部 分 的 话 ， 我 们 给 出 了 几乎 相同 的 代码 ; 


var data = ajax( "..UrL 1.." ); 
console.log( data ); 








但 是 ， 这 段 代 码 不 能 工作 ! 你 能 指出 其 中 的 区 别 吗 ? 区 别 就 在 于 生成 器 中 使 用 的 yield。 


这 就 是 奥秘 所 在 ! 正 是 这 一 点 使 得 我 们 看 似 阻 塞 同步 的 代码 ， 实 际 上 并 不 会 阻塞 整个 程 
序 ， 它 只 是 暂停 或 阻塞 了 生成 器 本 身 的 代码 。 





在 yield foo(11,31) 中 ， 首 先 调 用 foo(11,31)， 它 没有 返回 值 ( 即 返回 undefined) ， 所 以 
我 们 发 出 了 一 个 调用 来 请 求 数据 ， 但 实际 上 之 后 做 的 是 yield undefined。 这 没 问 题 ， 因 
为 这 段 代 码 当前 并 不 依赖 yield 出 来 的 值 来 做 任何 事情 。 本 章 后 面 会 再 次 讨论 这 一 点 。 























这 里 并 不 是 在 消息 传递 的 意义 上 使 用 yietd， 而 只 是 将 其 用 于 流程 控制 实现 暂停 /阻塞 。 实 
际 上 ， 它 还 是 会 有 消息 传递 ， 但 只 是 生成 右 恢 复 运 行 之 后 的 单 向 消息 传递 。 


所 以 ， 生 成 器 在 yield 处 暂停 ， 本 质 上 是 在 提出 一 个 问题 :“ 我 应 该 返回 什么 值 来 赋 给 变量 
text ? ” 谁 来 回答 这 个 问题 呢 ? 


























看 一 下 foo(..)。 如 果 这 个 Ajax 请 求 成 功 ， 我 们 调用 : 


it.next( data ); 
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这 会 用 响应 数据 恢复 生成 器 ， 意 味 着 我 们 暂停 的 yield 表达 式 直接 接收 到 了 这 个 值 。 然 后 
随 着 生成 器 代码 继续 运行 ， 这 个 值 被 赋 给 局 部 变量 text。 

很 酷 吧 ? 

回头 往 前 看 一 步 ， 思 萎 一 下 这 意味 着 什么 。 我 们 在 生成 器 内 部 有 了 看 似 完全 同步 的 代码 
(除了 yield 关键 字 本 身 )， 但 隐藏 在 背后 的 是 ， 在 foo(..) 内 的 运行 可 以 完全 异步 。 

这 是 巨大 的 改进 ! 对 于 我 们 前 面 陈述 的 回调 无 法 以 顺序 同步 的 、 符 合 我 们 大 脑 思考 模式 的 
方式 表达 异步 这 个 问题 ， 这 是 一 个 近乎 完美 的 解决 方案 。 
从 本 质 上 而 言 ， 我 们 把 异步 作为 实现 细节 抽象 了 出 去 ， 使 得 我 们 可 以 以 同步 顺序 的 形式 追 
踪 流 程控 制 :“ 发 出 一 个 Ajax 请 求 ， 等 它 完 成 之 后 打印 出 啊 应 结果 。 并且， 当然， 我 们 
只 在 这 个 流程 控制 中 表达 了 两 个 步 又， 而 这 种 表达 能 力 是 可 以 无 限 扩展 的 ， 以 便 我 们 无 论 
需要 多 少 步骤 都 可 以 表达 。 























这 是 一 个 很 重要 的 领情， 回 过 头 去 把 上 面 三 段 重读 一 壳 ， 让 它 融 入 你 的 思 
想 吧 | 





同步 错误 处 理 
前 面 的 生成 器 代码 甚至 还 给 我 们 带 来 了 更 多 其 他 的 好 处 。 让 我 们 把 注意 力 转移 到 生成 器 内 


部 的 try. .catch: 











一 1 





try { 
var text = yield foo( 11, 31 ); 
console.log( text ); 


catch (err) { 
console.error( err ); 


} 


这 是 如 何 工作 的 呢 ? 调用 fool..) 是 异步 完成 的 ， 难 道 try. .catch 不 是 无 法 捕获 异步 错 
误 ， 就 像 我 们 在 第 3 章 中 看 到 的 一 样 吗 ? 

我 们 已 经 看 到 yield 是 如 何 让 赋值 语句 暂停 来 等 待 foo(..) 完成 ， 使 得 响应 完成 后 可 以 被 
赋 给 text。 精 彩 的 部 分 在 于 yield 暂停 也 使 得 生成 器 能 够 捕获 错误 。 通 过 这 段 前 面 列 出 的 
代码 把 错误 抛 出 到 生成 器 中 : 





























if (err) { 
// 向 xmain() 抛 出 一 个 错误 





it.throw( err ); 


生成 器 yield 暂停 的 特性 意味 着 我 们 不 仅 能 够 从 异步 函数 调用 得 到 看 似 同步 的 返回 值 ， 还 
可 以 同步 捕获 来 自 这 些 异步 函数 调用 的 错误 | 
所 以 我 们 已 经 知道 ， 我 们 可 以 把 错误 抛 入 生成 器 中 ， 不 过 如 果 是 从 生成 器 向 外 抛 出 错误 
呢 ? 正如 你 所 料 : 


a 























function *main() { 
var x = yield "Hello World"; 


yield x.toLowerCase(); // 引发 一 个 异常 ! 
} 


var it = main(); 
it.next().value; // Hello World 


try { 
it.next( 42 ); 


catch (err) { 
console.error( err ); // TypeError 


} 





当然 ， 也 可 以 通过 throw … 手工 抛 出 一 个 错误 ， 而 不 是 通过 触发 异常 。 



































甚至 可 以 捕获 通过 throw(..) 抛 入 生成 器 的 同一 个 错误 ， 基 本 上 也 就 是 给 生成 器 一 个 处 理 
它 的 机 会 ， 如果 没 有 处 理 的 话 ， 返 代 绒 代码 就 必须 处 理 ; 
function *main() { 
var x = yield "Hello World"; 
// 永远 不 会 到 达 这 里 
console.log( x ); 
} 
var it = main(); 
it.next(); 
try { 
// *main() 会 处 理 这 个 错误 吗 ? 看 看 吧 ! 
it.throw( "Oops" ); 
catch (err) { 
// 不 行 ,没有 处 理 ! 
console.error( err ); // Oops 
+} 
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在 异步 代码 中 实现 看 似 同步 的 错误 处 理 (通过 try..catch) 在 可 读 性 和 合理 性 方面 都 是 一 
个 巨大 的 进步 。 











4.4 生成 器 +Promise 


在 前 面 的 讨论 中 ， 我 们 展示 了 如 何 异 步 迭 代 生 成 器 ， 这 是 一 团 乱 麻 似 的 回调 在 顺序 性 和 合 
理性 方面 的 巨大 进步 。 但 我 们 错失 了 很 重要 的 两 点 : Promise 的 可 信任 性 和 可 组 合 性 ( 参 
见 第 3 章 ) ! 

别 担心 ， 我 们 还 会 重 获 这 些 。ES6 中 最 完美 的 世界 就 是 生成 器 (看 似 同 步 的 异步 代码 ) 和 
Promise (可 信任 可 组 合 ) 的 结合 。 





























但 如 何 实现 呢 ? 
回想 一 下 第 3 章 里 在 运行 Ajax 例子 中 基于 Promise 的 实现 方法 : 


function foo(x,y) { 
return request( 
"http://some.url.1/?x=" + X + "&y=" + y 
); 
} 


foo( 11, 31 ) 
.then( 
function( text){ 
console.log( text ); 


function(err){ 
console.error( err ); 
} 
)3 








在 前 面 的 运行 Ajax 例子 的 生成 器 代码 中 ，foo(..) 没有 返回 值 (undefined) ， 并 且 我 们 的 
迭代 器 控制 代码 并 不 关心 yield 出 来 的 值 。 









































而 这 里 支持 Promise 的 foo(..) 在 发 出 Ajax 调用 之 后 返回 了 一 个 promise。 这 上 暗示 我 们 可 
以 通过 foo(..) 构造 一 个 promise， 然 后 通过 生成 器 把 它 yield 出 来 ， 然 后 迭代 器 控制 代码 
就 可 以 接收 到 这 个 promise 了 。 














但 迭代 器 应 该 对 这 个 promise 做 些 什么 呢 ? 

它 应 该 侦 听 这 个 promise 的 决议 (完成 或 拒绝 )， 然 后 要 么 使 用 完成 消息 恢复 生成 器 运行 ， 
要 么 向 生成 器 抛 出 一 个 带 有 拒绝 原因 的 错误 。 

我 再 重复 一 遍 ， 因 为 这 一 点 非常 重要 。 获 得 Promise 和 生成 器 最 大 效用 的 最 自然 的 方法 就 
是 yield 出 来 一 个 Promise， 然 后 通过 这 个 Promise 来 控制 生成 器 的 迭代 器 。 
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让 我 们 来 试 一 下 ! 首先 ， 把 支持 Promise 的 foo(..) 和 生成 器 *main() 放 在 一 起 : 


function foo(x,y) { 
return request( 
"http://some.UrL.1/?x=" + Xx + "8&y=" + y 
); 
3 


function *main() { 


try { 
var text = yield foo( 11, 31 ); 
console.log( text ); 


catch (err) { 
console.error( err ); 
小 
} 


这 次 重 构 代码 中 最 有 力 的 发 现 是 ，*main() 之 中 的 代码 完全 不 需要 改变 ! 在 生成 器 内 部 ， 
不 管 什么 值 yield 出 来 ， 都 只 是 一 个 透明 的 实现 细 方 ， 所 以 我 们 项 至 设 有 意识 到 其 发 生 ， 
也 不 需要 关心 。 
































但 现在 如 何 运行 *main() 呢 ? 还 有 一 些 实现 细节 需要 补充 ， 来 实现 接收 和 连接 yield 出 来 
的 promise， 使 它 能 够 在 决议 之 后 恢复 生成 器 。 先 从 手工 实现 开始 : 








var it = main(); 
var p = it.next().value; 


// 等 待 promise p 决 议 
p.then( 
function(text){ 
it.next( text ); 





}， 


function(err){ 
it.throw( err ); 
} 
); 


实际 上 ， 这 并 没有 那么 令 人 痛 苗 ， 对 吧 ? 





这 段 代 码 看 起 来 应 该 和 我 们 前 面 手工 组 合 通过 error-first 回调 控制 的 生成 器 非常 类 似 。 除 了 
没有 if (err) { it.throw..，promise 已 经 为 我 们 分 离 了 完成 (成 功 ) 和 拒绝 (失败 ) ， 否 
则 的 话 ， 和 迭代 器 控制 是 完全 一 样 的 。 














现在 ,我 们 已 经 隐藏 了 一 些 重要 的 细 市 。 


最 重要 的 是 ， 我 们 利用 了 已 知 *main() 中 只 有 一 个 需要 支持 Promise 的 步骤 这 一 事实 。 如 
果 想 要 能 够 实现 Promise 驱动 的 生成 器 ， 不 管 其 内 部 有 多 少 个 步骤 呢 ? 我 们 当然 不 希望 每 
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个 生成 器 手工 编写 不 同 的 Promise 链 ! 如 果 有 一 种 方法 可 以 实现 重复 ( 即 循环 ) 迭代 控制 ， 
每 次 会 生成 一 个 Promise， 等 其 决议 后 再 继续 ， 那 该 多 好 啊 。 























还 有 ， 如 果 在 it.next(..) 调用 过 程 中 生成 器 (有意 或 无 意 ) 抛 出 一 个 错误 会 怎样 呢 ? 是 
应 该 退出 呢 ， 还 是 应 该 捕获 这 个 错误 并 发 送 回去 呢 ? 类 似 地 ， 如 果 通 过 it.throw(..) 把 一 
个 Promise 拒绝 抛 和 人 生成 器 中 ， 但 它 却 没有 受到 处 理 就 被 直接 抛 回 了 呢 ? 


























4.4.1 支持 Promise 的 Generator Runner 

随 着 对 这 条 道路 的 深入 探索 ， 你 越 来 越 会 意识 到 :“ 哇 ， 如 果 有 革 个 工具 为 我 实现 这 些 就 
好 了 。” 关 于 这 一 点 ， 你 绝对 没 错 。 这 是 如 此 重要 的 一 个 模式 ， 你 绝对 不 希望 搞 错 (或 精 
疲 力 竭 地 一 次 又 一 次 重复 实现 )， 所 以 最 好 是 使 用 专门 设计 用 来 以 我 们 前 面 展示 的 方式 运 
行 Promise-yielding 生成 器 的 工具 。 











有 几 个 Promise 抽象 库 提 供 了 这 样 的 工具 ， 包 括 我 的 asynquence 库 及 其 runner(..)， 本 部 
分 的 附录 A 中 会 介绍 。 





但 是 ， 为 了 学 习 和 展示 的 目的 ， 我 们 还 是 自己 定义 一 个 独立 工具 ， 叫 作 run(..): 


// 在 此 感谢 Benjamin Gruenbaum (@benjamingr on GitHub) 的 巨大 改进 ! 
function run(gen) { 
var args = [].slice.call( arguments, 1), it; 





// 在 当前 上 下 文中 初始 化 生成 器 
it = gen.apply( this, args ); 














// 返回 一 个 promise 用 于 生成 器 完成 
return Promise.resolve() 
.then( function handLeNext(vaLue){ 
// 对 下 一 个 yietLd 出 的 值 运行 
var next = it.next( value ); 











return (function handleResult(next){ 
// 生成 器 运行 完毕 了 吗 ? 
if (next.done) { 
return next.value; 


} 
// 否则 继续 运行 





else { 
return Promise.resolve( next.value ) 
.then( 
// 成 功 就 恢复 异步 循环 ,把 决议 的 值 发 回 生成 器 
handLeNext， 


// 如 果 value 是 被 拒绝 的 promise， 
// 就 把 错误 传 回 生成 器 进行 出 错 处 理 
function handleErr(err) { 
return Promise.resolvel( 
it.throw( err ) 











) 
.then( handleResult ); 


} 
}) (next); 
} ); 
} 


诚 如 所 见 ， 你 可 能 并 不 愿意 编写 这 么 复杂 的 工具 ， 并 且 也 会 特别 不 希望 为 每 个 使 用 的 生成 
器 都 重复 这 段 代 码 。 所 以 ， 一 个 工具 或 库 中 的 辅助 函数 绝对 是 必要 的 。 尽 管 如 此 ， 我 还 是 
建议 你 花费 几 分 钟 时 间 学 习 这 段 代 码 ， 以 更 好 地 理解 生成 器 +Promise 协同 运作 模式 。 





如 何在 运行 Ajax 的 例子 中 使 用 run(..) 和 *main() 呢 ? 


function *main() { 


// .， 
run( main ); 
就 是 这 样 ! 这 种 运行 run(..) 的 方式 ， 它 会 自动 异步 运行 你 传 给 它 的 生成 器 ， 直 到 结束 。 
我 们 定义 的 run(..) 返回 一 个 promise, 一 旦 生成 器 完成 ， 这 个 promise 就 


会 决议 , 或 收 到 一 个 生成 器 没有 处 理 的 未 捕获 异常 。 这 里 并 没有 展示 这 种 功 
能 ， 但 我 们 会 在 本 章 后 面部 分 再 介绍 这 一 点 。 


























ES7: async 与 await? 

前 面 的 模式 一 一 生成 器 yield 出 Promise， 然 后 其 控制 生成 器 的 迭代 器 来 执行 它 ， 直 到 结 
束 一 一 是 非常 强大 有 用 的 一 种 方法 。 如 果 我 们 能 够 无 需 库 工具 辅助 函数 〈 即 run(..)) 就 
能 够 实现 就 好 了 。 


关于 这 一 点 ， 可 能 有 一 些 好 消息 。 在 编写 本 书 的 时 候 ， 对 于 后 ES6、ES7 的 时 间 框架 ， 在 
这 一 方面 增加 语法 支持 的 提案 已 经 有 了 一 些 初期 但 很 强势 的 支持 。 显 然 ， 现 在 确定 细 市 还 
太 早 ， 但 其 形式 很 可 能 会 类 似 如 下 : 


function foo(x,y) { 
return request( 
"http://some.url.1/?x=" + Xx + "8&y=" + y 
); 
. 


async function main() { 
try { 
var text = await foo( 11, 31 ); 
console.log( text ); 


} 
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Catch (err) { 
console.error( err ); 
} 
} 


main(); 
可 以 看 到 ， 这 里 没有 通过 run(..) 调用 (意味 着 不 需要 库 工具 ! ) 来 触发 和 驱动 main()， 
它 只 是 被 当 作 一 个 普通 函数 调用 。 另 外 ，main() 也 不 再 被 声明 为 生成 器 函数 了 ， 它 现在 是 
一 类 新 的 函数 : async 函数 。 最 后 ， 我 们 不 再 yield 出 Promise， 而 是 用 await 等 待 它 决 议 。 




















如 果 你 await 了 一 个 Promise，async 函数 就 会 自动 获知 要 做 什么 ， 它 会 暂停 这 个 函数 (就 
像 生成 器 一 样 )， 直 到 Promise 决议 。 我 们 并 没有 在 这 段 代码 中 展示 这 一 点 ， 但 是 调用 一 个 
像 main() 这 样 的 async 函数 会 自动 返回 一 个 promise。 在 函数 完全 结束 之 后 ， 这 个 promise 
会 决议 。 








有 C# 经 验 的 人 可 能 很 熟悉 async/await 语法 ， 因 为 它们 基本 上 是 相同 的 。 











从 本 质 上 说 ， 这 个 提案 就 是 把 前 面 我 们 已 经 推导 出 来 的 模式 写 进 规范 ， 使 其 进入 语法 机 
制 : 组 合 Promise 和 看 似 同步 的 流程 控制 代码 。 这 是 两 个 最 好 的 世界 的 结合 ， 有 效 地 实际 
解决 了 我 们 列 出 的 回调 方案 的 主要 问题 。 


这 样 的 ES7 提案 已 经 存在 ， 并 有 了 初期 的 支持 和 热情 ， 仅 仅 是 这 个 事实 就 极 大 增加 了 这 个 
异步 模式 对 其 未 来 重要 性 的 信心 。 


4.4.2 ”生成 器 中 的 Promise 并 发 
到 目前 为 止 ， 我 们 已 经 展示 的 都 是 Promise+ 生成 器 下 的 单 步 异 步 流 程 。 但 是 ， 现 实 世界 中 
的 代码 常常 会 有 多 个 异步 步骤 。 
































如 果 不 认 真 对待 的 话 ， 生 成 器 的 这 种 看 似 同 步 的 风格 可 能 会 让 你 陷入 对 自己 异步 并 发 组 
织 方 式 的 自满 中 ， 进 而 导致 并 不 理想 的 性 能 模式 。 所 以 我 们 打算 花 点 时 间 来 研究 一 下 各 
种 方案 。 

想象 这 样 一 个 场景 :你 需要 从 两 个 不 同 的 来 源 获 取 数 据 ， 然 后 把 响应 组 合 在 一 起 以 形成 第 
三 个 请 求 ， 最 终 把 最 后 一 条 啊 应 打印 出 来 。 第 3 章 已 经 用 Promise 研究 过 一 个 类 似 的 场景 ， 
但 是 让 我 们 在 生成 器 的 环境 下 重新 考虑 一 下 这 个 问题 吧 ，。 








你 的 第 一 直觉 可 能 类 似 如 下 : 





function *foo() { 
var rl = yield request( "http://some.url.1" ); 
var r2 = yield request( "http://some.url.2" ); 


var r3 = yield request( 
"http://some.url.3/?v=" + rill+"," + r2 
); 


console.log( r3 ); 


} 
// 使 用 前 面 定义 的 工具 run(..) 


run( foo ); 
这 段 代 码 可 以 工作 ， 但 是 针对 我 们 特定 的 场景 而 言 ， 它 并 不 是 最 优 的 。 你 能 指出 原因 吗 ? 
因为 请 求 ri 和 r2 能 够 一 一 出 于 性 能 考虑 也 应 该 一 一 并 发 执行 ， 但 是 在 这 段 代 码 中 ， 
它们 是 依次 执行 的 ， 直 到 请 求 URL"http://some.url.1" 完成 后 才 会 通过 Ajax 获取 
URL"http://some.url.2"。 这 两 个 请 求 是 相互 独立 的 ， 所 以 性 能 更 高 的 方案 应 该 是 让 它们 
同时 运行 。 





但 是 ， 到 底 如 何 通 过 生成 器 和 yield 实现 这 一 点 呢 ? 我 们 知道 yield 只 是 代码 中 一 个 单独 
的 暂停 点 ， 并 不 可 能 同时 在 两 个 点 上 暂停 。 


最 自然 有 效 的 答案 就 是 让 异步 流程 基于 Promise， 特 别 是 基于 它们 以 时 间 无 关 的 方式 管理 
状态 的 能 力 (参见 3.1.1 节 )。 


最 简单 的 方法 : 























T 





function *foo() { 

// 让 两 个 请 求 "并 行 " 
var pl = request( "http://some.url.1" ); 
var p2 = request( "http://some.url.2" ); 
// 等 待 两 个 promise 都 决议 
var rl = yield pl; 
var r2 = yield p2; 





var r3 = yield request( 
"http://some.UrL.3/?v=" + r1 + "， + r2 


3 


console.log( r3 ); 


} 
// 使 用 前 面 定义 的 工具 run(..) 


run( foo ); 








为 什么 这 和 前 面 的 代码 片段 不 同 呢 ? 观察 一 下 yield 的 位 置 。p1 和 p2 是 并 发 执行 ( 即 
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“并 行 ”) 的 用 于 Ajax 请 求 的 promise。 哪 一 个 先 完成 都 无 所 谓 ， 因 为 promise 会 按照 需要 
在 决议 状态 保持 任意 长 时 间 。 

然后 我 们 使 用 接 下 来 的 两 个 yield 语句 等 待 并 取得 promise 的 决议 (分别 写 入 rl 和 r2)。 
如 果 p1 先决 议 ， 那 么 yield pl 就 会 先 恢复 执行 ， 然 后 等 待 yield p2 恢复 。 如 果 p2 先决 
议 ， 它 就 会 耐心 保持 其 决议 值 等 待 请 求 ， 但 是 yield pl 将 会 先 等 待 ， 直 到 p1 决议 。 























不 管 哪 种 情况 ，p1 和 p2 都 会 并 发 执行 ， 无 论 完 成 顺序 如 何 ， 两 者 都 要 全 部 完成 ， 然 后 才 
会 发 出 r3 = yield request. .Ajax 请 求 。 

















这 种 流程 控制 模型 如 果 听 起 来 有 点 熟悉 的 话 ， 是 因为 这 基本 上 和 我 们 在 第 3 章 中 通过 
Promise.all([ .. ]) 工具 实现 的 gate 模式 相同 。 因 此 ， 也 可 以 这 样 表 达 这 种 流程 控制 |: 








function *foo() { 
// 让 两 个 请 求 "并 行 ", 并 等 待 两 个 promise 都 决议 
var results = yield Promise.all( [ 
request( "http://some.url.1" ), 
request( "http://some.url.2" ) 
] ); 


Var rl 
Var r2 


= results[0]; 

= results[1]; 

var r3 = yield request( 
"http://some.url.3/?v=" + ri+","+r2 

); 


console.log( r3 ); 


} 
// 使 用 前 面 定义 的 工具 run(..) 


run( foo ); 

















就 像 我 们 在 第 3 章 中 讨论 过 的 ， 我 们 甚至 可 以 通过 ES6 解构 赋值 ， 把 var 
rl1= .. var r2 = .. 赋值 语句 简化 为 var [rl,r2] = results。 


换 名 话说 ，Promise 所 有 的 并 发 能 力 在 生成 器 +Promise 方法 中 都 可 以 使 用 。 所 以 无 论 在 
什么 地 方 你 的 需求 超过 了 顺序 的 this-then-that 异步 流程 控制 ，Promise 很 可 能 都 是 最 好 的 
选择 。 

隐藏 的 Promise 

作为 一 个 风格 方面 的 提醒 : 要 注意 你 的 生成 器 内 部 包含 了 多 少 Promise 逻辑 。 我 们 介绍 的 
使 用 生成 器 实现 异步 的 方法 的 全 部 要 点 在 于 创建 简单 、 顺 序 、 看 似 同 步 的 代码 ， 将 异步 的 
细节 尽 可 能 隐藏 起 来 。 
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比如 ， 这 可 能 是 一 个 更 简洁 的 方案 : 


// 注 :普通 函数 ,不 是 生成 器 

function bar(url1i,url2) { 
return Promise.all( [ 

request( url1 ), 

request( url2 ) 

] ); 

















} 


function *foo() { 
// 隐藏 bar(..) 内 部 基于 Promise 的 并 发 细节 
var results = yield bar( 
"http://some.url.1", 
"http://some.url.2" 























); 
var rl = results[0]; 
var r2 = resuLts[1]; 


var r3 = yield request( 
"http://some.UrL.3/?v=" + r1 + "，" + T2 
); 


console.log( r3 ); 


} 
// 使 用 前 面 定义 的 工具 run(..) 


run( foo ); 
在 *foo() 内 部 ， 我 们 所 做 的 一 切 就 是 要 求 bar(..) 给 我 们 一 些 results， 并 通过 yield 
来 等 待 结果 ， 这 样 更 简洁 也 更 清晰 。 我 们 不 需要 关心 在 底层 是 用 Promise.all([ .. ]) 
Promise 组 合 来 实现 这 一 切 。 





我 们 把 异步 ， 实 际 上 是 Promise， 作 为 一 个 实现 细节 看 待 。 


如 果 想 要 实现 一 系列 高 级 流程 控制 的 话 ， 那 么 非常 有 用 的 做 法 是 : 把 你 的 Promise 逻辑 隐 
藏 在 一 个 只 从 生成 器 代码 中 调用 的 函数 内 部 。 比 如 : 





function bar() { 
Promise.all( [ 
baz( .. ) 
.then( .. )， 
Promise.race( [ .. ] ) 
] ) 
.then( .. ) 
} 


有 时 候 会 需要 这 种 逻辑 ， 而 如 果 把 它 直 接 放 在 生成 器 内 部 的 话 ， 那 你 就 失去 了 几乎 所 有 一 
开始 使 用 生成 器 的 理由 。 应 该 有 意 将 这 样 的 细节 从 生成 器 代码 中 抽象 出 来 ， 以 避免 它 把 高 
层次 的 任务 表达 变 得 杂乱 。 
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创建 代码 除了 要 实现 功能 和 保持 性 能 之 外 ， 你 还 应 该 尽 可 能 使 代码 易于 理解 和 维护 。 





对 编程 来 说 ， 抽 象 并 不 总 是 好 事 ， 很 多 时 候 它 会 增加 复杂 度 以 换取 简洁 性 。 
但 是 在 这 个 例子 里 ， 我 相信 ， 对 生成 器 +Promise 异步 代码 来 说 ， 相 比 于 其 他 
实现 ， 这 种 抽象 更 加 健康 。 尽 管 如 此 ， 还 是 建议 大 家 要 注意 具体 情况 具体 分 
析 ， 为 你 和 你 的 团队 作出 正确 的 决定 。 











之 口 
4.5 生成 器 委托 
在 前 面 一 节 中 ， 我 们 展示 了 从 生成 器 内 部 调用 常规 函数 ， 以 及 这 如 何 对 于 把 实现 细 市 (就 
像 异步 Promise 流 ) 抽象 出 去 还 是 一 种 有 用 的 技术 。 但 是 ， 用 普通 国 数 实现 这 个 任务 的 主 
要 缺点 是 它 必须 遵守 普通 国 数 的 规则 ， 也 就 意味 着 它 不 能 像 生成 器 一 样 用 yield 暂停 自己 。 


可 能 出 现 的 情况 是 ， 你 可 能 会 从 一 个 生成 器 调用 另 一 个 生成 器 ， 使 用 辅助 函数 run(..)， 就 
像 这 样 : 
function *foo() { 


var r2 = yield request( "http://some.url.2" ); 
var r3 = yield request( "http://some.url.3/?v=" + r2 ); 


return r3; 


} 


function *bar() { 
var rl1 = yield request( "http://some.url.1" ); 








// 通过 run(..) "委托 "给 *foo() 
var r3 = yield run( foo ); 








console.log( r3 ); 


} 


run( bar ); 








我 们 再 次 通过 run(..) 工具 从 *bar() 内 部 运行 *foo()。 这 里 我 们 利用 了 如 下 事实 : 我们 前 
下 定义 的 run(..) 返回 一 个 promise， 这 个 promise 在 生成 器 运行 结束 时 (或 出 错 退 出 时 ) 
决议 。 因 此 ， 如 果 从 一 个 run(..) 调用 中 yield 出 来 一 个 promise 到 另 一 个 run(..) 实例 
中 ， 它 会 自动 暂停 *bar()， 直 到 *foo() 结束 。 























但 其 实 还 有 一 个 更 好 的 方法 可 以 实现 从 *bar() 调用 *foo()， 称 为 yield 委托 。yield 委托 
的 具体 语法 是 : yield * (注意 多 出 来 的 *) 。 在 我 们 弄 清 它 在 前 面 的 例子 中 的 使 用 之 前 ， 
先 来 看 一 个 简单 点 的 场景 : 





function *foo() { 
console.log( "*foo() starting" ); 





yield 3; 
yield 4; 


console.log( "*foo() finished" ); 


} 


function *bar() { 
yield 1; 
yield 2; 
yield *foo(); 
yield 5; 

} 


var it = bar(); 
it.next().value; 
it.next().value; 


it.next().value; 


it.next().value; 
it.next().value; 





他 文档 不 同 
格 ， 由 你 自 








// yield 委 托 | 


// 2 
// *foo() 启 动 
// 3 


// 4 
// *foo() 完 成 
// 5 


在 本 章 前 面 的 一 条 提示 中 ， 我 解释 了 为 什么 我 更 喜欢 function *foo() ..， 
而 不 是 function* foo() ..。 类 似 地 ， 我 也 更 喜欢 一 一 与 这 个 主题 的 多 数 其 








使 用 yield *foo() 而 不 是 yield* foo()。* 的 位 置 仅 关乎 风 
己 来 决定 使 用 哪 种 。 不 过 我 发 现 保持 风格 一 臻 是 很 吸引 人 的 。 


这 里 的 yield *foo() 委托 是 如 何 工 作 的 呢 ? 


首先 ， 和 我 们 以 前 看 到 的 完全 一 样 ， 调 用 foo() 创建 一 个 迭代 器 。 然 后 yield * 把 迭代 器 
实例 控制 (当前 *bar() 生成 器 的 ) 委托 给 / 转移 到 了 这 另 一 个 *foo() 友 代 器 。 





所 以 ， 前 面 两 个 it.next() 调用 控制 的 是 *bar()。 但 当 我 们 发 出 第 三 个 it.next() 调用 时 ， 
*foo() 现在 启动 了 ， 我 们 现在 控制 的 是 *foo() 而 不 是 *bar()。 这 也 是 为 什么 这 被 称 为 委 
托 : *bar() 把 自己 的 迭代 控制 委托 给 了 *foo( )。 


一 旦 it 闪 代 器 控制 消耗 了 整个 *foo() 迭代 器 ，it 就 会 自动 转 回 控制 *bar()。 











现在 回 到 前 面 使 用 三 个 顺序 Ajax 请 求 的 例子 : 


function *foo() { 
var r2 = yield 
var r3 = yield 


return r3; 


} 


function *bar() { 
var rl = yield 


request( "http://some.url.2" ); 
request( "http://some.url.3/?v=" + r2 ); 


request( "http://some.url.1" ); 
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// 通过 yeild* "委托 "给 *foo() 
var r3 = yield *foo(); 














console.log( r3 ); 


} 


run( bar ); 








这 段 代 码 和 前 面 版 本 的 唯一 区 别 就 在 于 使 用 了 yield *foo()， 而 不 是 前 面 的 yield run(foo)。 




















yield * 暂停 了 迭代 控制 ， 而 不 是 生成 器 控制 。 当 你 调用 *foo() 生成 器 
时 ， 现 在 yield 委托 到 了 它 的 迭代 器 。 但 实际 上 ， 你 可 以 yield 委托 到 任意 
iterable，yield *[1,2,3] 会 消耗 数组 值 [1,2,3] 的 默认 友 代 器 。 





4.5.1 为 什么 用 委托 


yield 委托 的 主要 目的 是 代码 组 织 ， 以 达到 与 普通 函数 调用 的 对 称 。 














想像 一 下 有 两 个 模块 分 别提 供 了 方法 foo() 和 bar()， 其 中 bar() 调用 了 foo()。 一 般 来 
说 ， 把 两 者 分 开 实 现 的 原因 是 该 程序 的 适当 的 代码 组 织 要 求 它 们 位 于 不 同 的 函数 中 。 比 
如 ， 可 能 有 些 情况 下 是 单独 调用 foo()， 另 外 一 些 地 方 则 由 bar() 调用 foo()。 











同样 是 出 于 这 些 原因 ， 保 持 生 成 器 分 离 有 助 于 程序 的 可 读 性 、 可 维护 性 和 可 调试 性 。 在 这 
一 方面 ，yield * 是 一 个 语法 上 的 缩写 ， 用 于 代替 手工 在 *foo() 的 步骤 上 迭代 ， 不 过 是 在 
*bar() 内 部 。 

如 果 *foo() 内 的 步骤 是 异步 的 话 ， 这 样 的 手工 方法 将 会 特别 复杂 ， 这 也 是 你 可 能 需要 使 用 
run(..) 工具 来 做 某 些 事 情 的 原因 。 就 像 我 们 已 经 展示 的 ，yield *foo() 消除 了 对 run(..) 
工具 的 需要 (就 像 run(foo) ) 。 





4.5.2 ”消息 委托 
你 可 能 会 疑惑 ， 这 个 yield 委托 是 如 何不 只 用 于 迭代 器 控制 工作 ， 也 用 于 双向 销 息 传 递 工 
作 的 呢 。 认 真 跟踪 下 面 的 通过 yield 委托 实现 的 消息 流出 入 : 


function *foo() { 
console.log( "inside *foo():", yield "B" ); 


console.log( "inside *foo():", yield "C" ); 


return "D"; 


} 


function *bar() { 





console.log( "inside *bar():", yield "A" ); 


// yield 委 托 | 


console.log( "inside *bar():", yield *foo() ); 
console.log( "inside *bar():", yield "E" ); 


return "F"; 


} 
var it = bar(); 


console.log( "outside:", it.next().value ); 
// outside: A 


console.log( "outside:", it.next( 1 ).vaLue ); 
// inside *bar(): 1 
// outside: B 


console.log( "outside:", it.next( 2 ).vaLue ); 
// inside *foo(): 2 
// outside: C 


console.log( "outside:", it.next( 3 ).value ); 
// inside *foo(): 3 

// inside *bar(): D 

// outside: E 


console.log( "outside:", it.next( 4 ).vaLue ); 
// inside *bar(): 4 
// outside: F 


要 特别 注意 it.next(3) 调用 之 后 的 执行 步骤 。 


( 值 3〈 通 过 *bar() 内 部 的 yield 委托 ) 传人 等 待 的 *foo() 内 部 的 yield"C" 表达 式 。 

(2) 然后 *foo() 调用 return"D", 但 是 这 个 值 并 没有 一 直 返 回 到 外 部 的 it.next(3) 调用 。 

(3) 取而代之 的 是 ， 值 "5" 作为 *bar() 内 部 等 待 的 yield*foo() 表达 式 的 结果 发 出 一 一 这 个 
yield 委托 本 质 上 在 所 有 的 *foo() 完成 之 前 是 暂停 的 。 所 以 "D" 成 为 *bar() 内 部 的 最 
后 结果 ， 并 被 打印 出 来 。 

(4)yield"E" 在 *bar() 内 部 调用 ， 值 "E" 作为 it.next(3) 调用 的 结果 被 yield 发 出 。 


从 外 层 的 迭代 器 (it) 角度 来 说 ， 是 控制 最 开始 的 生成 器 还 是 控制 委托 的 那个 ， 没 有 任何 


区 别 。 




















实际 上 ，yield 委托 甚至 并 不 要 求 必 须 转 到 另 一 个 生成 器 ， 它 可 以 转 到 一 个 非 生 成 器 的 一 
般 iterable。 比 如 : 





function *bar() { 
console.log( "inside *bar():", yield "A" ); 
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// yield 委 托 给 非 生成 器 | 
console.log( "inside *bar():", yield *[ "B", "C", "D" ] ); 





console.log( "inside *bar():", yield "E" ); 


return "F"; 


} 


var it = bar(); 


中 


console.log( "outside:", i 
// outside: A 


.next().vaLue ); 


+ 


console.log( "outside:", i 
// inside *bar(): 1 
// outside: B 


.Next( 1 ).value 


_ 
-~ 


中 


console.log( "outside:", i 
// outside: C 


.Next( 2 ).value 


v» 


中 


console.log( "outside:", it.next( 3 ).value 


_ 
-~ 


// outside: D 


console.log( "outside:", it.next( 4 ).value 
// inside *bar(): undefined 
// outside: E 


_ 
=。 


console.log( "outside:", it.next( 5 ).value ); 
// inside *bar(): 5 
// outside: F 


注意 这 个 例子 和 之 前 那个 例子 在 消息 接收 位 置 和 报告 位 置 上 的 区 别 。 


最 显著 的 是 ， 默 认 的 数组 迭代 器 并 不 关心 通过 next(..) 调用 发 送 的 任何 消息 ， 所 以 值 2、 
3 和 4 根本 就 被 忽略 了 。 还 有 ， 因 为 迭代 器 没有 显 式 的 返回 值 (和 前 面 使 用 的 *foo() 不 
同 )， 所 以 yield * 表达 式 完 成 后 得 到 的 是 一 个 undefined。 


异常 也 被 委托 ! 
和 yield 委托 透明 地 双向 传递 消息 的 方式 一 样 ， 错 误 和 异常 也 是 双向 传递 的 : 






































function *foo() { 


catch (err) { 

console.log( "error caught inside *foo():", err ); 
} 
yield "C"; 


throw "D"; 
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function *bar() { 
yield "A"; 


try { 
yield *foo(); 
} 


catch (err) { 
console.log( "error caught inside *bar():", err ); 


3 
yield "E"; 


yield *baz(); 

















// 注 :不 会 到 达 这 里 | 
yield "G"; 
4} 


function *baz() { 
throw "F"; 


} 
var it = bar(); 


console.log( "outside:", it.next().value ); 
// outside: A 


console.log( "outside:", it.next( 1 ).vaLue ); 
// outside: B 


console.log( "outside:", it.throw( 2 ).value ); 
// error caught inside *foo(): 2 
// outside: C 


console.log( "outside:", it.next( 3 ).value ); 
// error caught inside *bar(): D 
// outside: E 


try { 
console.log( "outside:", it.next( 4 ).vaLue ); 
} 


catch (err) { 
console.log( "error caught outside:", err ); 


} 


// error caught outside: F 


这 段 代 码 中 需要 注意 以 下 儿 点 。 


(调用 it.throw(2) 时 ， 它 会 发 送 错误 消息 2 到 *bar()， 它 又 将 其 委托 给 *foo()， 后 者 捕 





获 并 处 理 它 。 然 后 ，yield"C" 把 "Cc" 发 送 回去 作为 it.throw(2) 调用 返回 的 value。 























(2) 接 下 来 从 *foo() 内 throw 出 来 的 值 "5" 传播 到 *bar()， 这 个 函数 捕获 并 处 理 它 。 然 后 


yield"E" 把 "E" 发 送 回去 作为 it.next(3) 调用 返回 的 value。 
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(3) 然 后 ， 从 *baz() throw 出 来 的 异常 并 没有 在 *bar() 内 被 捕获 一 一 所 以 *baz() 和 *bar() 
都 被 设置 为 完成 状态 。 这 段 代码 之 后 ， 就 再 也 无 法 通过 任何 后 续 的 next(..) 调用 得 到 
值 "G"，next(..) 调用 只 会 给 value 返回 undefined。 











4.5.3 ”异步 委托 
我 们 终于 回 到 前 面 的 多 个 顺序 Ajax 请 求 的 yield 委托 例子 : 





function *foo() { 
var r2 = yield request( "http://some.url.2" ); 
var r3 = yield request( "http://some.url.3/?v=" + r2 ); 


return r3; 


} 


function *bar() { 
var rl1 = yield request( "http://some.url.1" ); 


var r3 = yield *foo(); 


console.log( r3 ); 


上 


run( bar ); 


这 里 我 们 在 *bar() 内 部 没有 调用 yield run(foo)， 而 是 调用 yield *foo()。 





在 这 个 例子 之 前 的 版 本 中 ,使 用 了 Promise 机 制 (通过 run(..) 控制 ) 把 值 从 *foo() 内 的 
return r3 传递 给 *bar() 中 的 局 部 变量 r3。 现 在 ， 这 个 值 通过 yield * 机 制 直接 返回 。 





除 此 之 外 的 行为 非常 相似 。 


4.5.4 递归 委托 
当然 ，yield 委托 可 以 跟踪 任意 多 委托 步骤 ， 只 要 你 把 它们 连 在 一 起 。 甚 至 可 以 使 用 yield 
委托 实现 异步 的 生成 器 递归 ， 即 一 个 yield 委托 到 它 自身 的 生成 器 : 





function *foo(val) { 
if (val > 1) { 
// 生成 器 递归 
val = yield *foo( val - 1 ); 
3 


return yield request( "http://some.url/?v=" + val ); 


} 


function *bar() { 
var r1 = yield *foo( 3 ); 
console.log( r1 ); 





run( bar ); 


run(..) 工具 可 以 通过 run( foo，3 ) 调用 ， 因 为 它 支 持 额 外 的 参数 和 生成 
器 一 起 传 入 。 但 是 ， 这 里 使 用 了 设 有 参数 的 *bar()， 以 展示 yield * 的 灵 
活性 。 




















这 段 代 码 后 面 的 处 理 步 又 是 怎样 的 呢 ? 坚持 一 下 ， 接 下 来 的 细 闻 描述 可 能 会 非常 复杂 。 





(1) run(bar) 启动 生成 器 *bar()。 
(2) foo(3) 创建 了 一 个 *foo(..) 的 从 代 器 ， 并 传 入 3 作为 其 参数 val。 
































(3) 因为 3 > 1， 所 以 foo(2) 创建 了 另 一 个 迭代 器 ， 并 传 入 2 作为 其 参数 val。 
(4) 因 为 2 > 1， 所 以 foo(1) 又 创建 了 一 个 新 的 迭代 器 ， 并 传 入 1 作为 其 参数 val。 
(5) 因为 1 > 1 不 成 立 ， 所 以 接 下 来 以 值 1 调用 request(..)， 并 从 这 第 一 个 Ajax 调用 得 到 








一 个 promise。 

(6) 这 个 promise 通过 yield 传 出 ， 回 到 *foo(2) 生成 器 实例 。 

(7) yield * 把 这 个 promise 传 出 回 到 *foo(3) 生成 器 实例 。 另 一 个 yield * 把 这 个 promise 
传 出 回 到 *bar() 生成 器 实例 。 再 有 一 个 Yield * 把 这 个 promise 传 出 回 到 run(..) 工 
具 ， 这 个 工具 会 等 待 这 个 promsie (第 一 个 Ajax 请 求 ) 的 处 理 。 

(8) 这 个 promise 决议 后 ， 它 的 完成 消息 会 发 送出 来 恢复 *bar();， 后 者 通过 yield * 转 入 
*foo(3) 实例 ， 后 者 接着 通过 yield * 转 入 *foo(2) 生成 器 实例 ， 后 者 再 接着 通过 yield * 
转 和 人 *foo(3) 生成 器 实例 内 部 的 等 待 着 的 普通 yield。 

(9) 第 一 个 调用 的 Ajax 响应 现在 立即 从 *foo(3) 生成 器 实例 中 返回 。 这 个 实例 把 值 作为 
*foo(2) 实例 中 yield * 表达 式 的 结果 返回 ， 赋 给 它 的 局 部 变量 val。 

(10) 在 *foo(2) 中 ， 通 过 request(..) 发 送 了 第 二 个 Ajax 请 求 。 它 的 promise 通过 yield 
发 回 给 *foo(1) 实例 ， 然 后 通过 yield * 一 路 传递 到 run(..) (再 次 进行 步骤 7)。 这 个 
promise 决议 后 ， 第 二 个 Ajax 响应 一 路 传播 回 到 *foo(2) 生成 器 实例 ， 赋 给 它 的 局 部 
变量 val。 

(11) 最 后 ， 通 过 request(..) 发 出 第 三 个 Ajax 请 求 ， 它 的 promise 传 出 到 run(..)， 然 后 它 
的 决议 值 一 路 返回 ， 然 后 return 返回 到 *bar() 中 等 待 的 yield * 表达 式 。 

































































嘲 ! 这 么 多 疯狂 的 脑力 杂 要 ， 是 不 是 ? 这 一 部 分 你 可 能 需要 多 读 几 次 ， 然 后 吃 点 零食 让 大 
脑 保持 清醒 ! 


4.6 生成 器 并 发 


就 像 我 们 在 第 1 章 和 本 章 前 面 都 讨论 过 的 一 样 ， 两 个 同时 运行 的 进程 可 以 合作 式 地 交替 运 
作 ， 而 很 多 时 候 这 可 以 产生 (双关 ， 原 文 为 yield: 既 指 产生 又 指 yield 关键 字 ) 非常 强大 
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的 异步 表示 。 


坦白 地 说 ， 本 部 分 前 面 的 多 个 生成 器 并 发 交替 执行 的 例子 已 经 展示 了 如 何 使 其 看 起 来 令 人 
迷惑 。 但 是 ， 我 们 已 经 暗示 过 了 ， 在 一 些 场景 中 这 个 功能 会 很 有 用 武之 地 的 。 


























回想 一 下 第 1 章 给 出 的 一 个 场景 : 其 中 两 个 不 同 并 发 Ajax 响应 处 理 函 数 需 要 彼此 协调 ， 
以 确保 数据 交流 不 会 出 现 竞 态 条 件 。 我 们 把 响应 插入 到 res 数组 中 ， 就 像 这 样 : 








function response(data) { 
if (data.url == "http://some.url.1") { 
res[0] = data; 


else if (data.UrL == "http://some.url.2") { 
res[1] = data; 
} 
} 


但 是 这 种 场景 下 如 何 使 用 多 个 并 发 生成 器 呢 ? 
// request(..) 是 一 个 支持 Promise 的 Ajax 工 具 
var res = []; 
function *reqData(url) { 

res.push( 


yield request( url ) 
); 








这 里 我 们 将 使 用 生成 器 *reqData(..) 的 两 个 实例 ， 但 运行 两 个 不 同 生成 器 的 
实例 也 没有 任何 区 别 。 两 种 方法 的 过 程 几乎 一 样 。 稍 后 将 会 介绍 两 个 不 同 生 
成 器 的 彼此 协调 。 








这 里 不 需要 手工 为 res[9] 和 res[1] 赋值 排序 ， 而 是 使 用 合作 式 的 排序 ， 使 得 res. 
push(..) 把 值 按照 预期 以 可 预测 的 顺序 正确 安置 。 这 样 ， 表 达 的 逻辑 给 人 感觉 应 该 更 清晰 
= 


但 是 ， 实 践 中 我 们 如 何 安 排 这 些 交 互 呢 ?” 首 先 ， 使 用 Promise 手工 实现 : 





var it1 = reqData( "http://some.url.1" ); 
var it2 = reqData( "http://some.url.2" ); 


var p1 = iti.next(); 
var p2 = it2.next(); 
pl 


.then( function(data){ 
iti.next( data ); 
return p2; 





}) 

.then( function(data){ 
it2.next( data ); 

下 


*reqData(..) 的 两 个 实例 都 被 启动 来 发 送 它 们 的 Ajax 请 求 ， 然 后 通过 yield 暂停 。 然 后 我 
们 选择 在 pl 决议 时 恢复 第 一 个 实例 ， 然 后 p2 的 决议 会 重启 第 二 个 实例 。 通 过 这 种 方式 ， 
我 们 使 用 Promise 配置 确保 res[9] 中 会 放置 第 一 个 响应 ， 而 res[1] 中 会 放置 第 二 个 响应 。 
但 是 ， 坦 白地 说 ， 这 种 方式 的 手工 程度 非常 高 ， 并 且 它 也 不 能 真正 地 让 生成 器 自己 来 协 
调 ， 而 那 才 是 真正 的 威力 所 在 。 让 我 们 换 一 种 方法 试 试 : 


// _ request(. .) 是 一 个 支持 Promise 的 Ajax 工具 

















var res = []; 


function *reqData(url) { 
var data = yield request( url ); 


// 控制 转移 
yield; 


res.push( data ); 


} 


Var it1 
Var it2 


reqData( "http://some.url.1" ); 
reqData( "http://some.url.2" ); 


Var pl 
var p2 


= it.next(); 

= it.next(); 

p1.then( function(data){ 
iti.next( data ); 

}); 


p2.then( function(data){ 
it2.next( data ); 
} ); 


Promise.all( [p1,p2] ) 

.then( function(){ 
it1.next() ; 
it2.next(); 

} ); 


好 吧 ， 这 看 起 来 好 一 点 (尽管 仍然 是 手工 的 ! )， 因 为 现在 *reqData(.…) 的 两 个 实例 确实 
是 并 发 运行 了 ， 而 且 (至 少 对 于 前 一 部 分 来 说 ) 是 相互 独立 的 。 


在 前 面 的 代码 中 ， 第 二 个 实例 直到 第 一 个 实例 完全 结束 才 得 到 数据 。 但 在 这 里 ， 两 个 实例 
都 是 各 自 的 响应 一 回来 就 取得 了 数据 ， 然 后 每 个 实例 再 次 yietld， 用 于 控制 传递 的 目的 。 
然后 我 们 在 Promise.all([ .. ]) 处 理 函 数 中 选择 它们 的 恢复 顺序 
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可 能 不 那么 明显 的 是 ， 因 为 对 称 性 ， 这 种 方法 以 更 简单 的 形式 上 暗示 了 一 种 可 重用 的 工具 。 
还 可 以 做 得 更 好 。 来 设想 一 下 使 用 一 个 称 为 runALL(..) 的 工具 : 

// request(..) 是 一 个 支持 Promise 的 Ajax 工 具 

var res = []; 


ruUnALL( 
function*(){ 
var pl = request( "http://some.url.1" ); 


// 控制 转移 
yield; 





res.push( yield pl1 ); 
]， 
function*(){ 
var p2 = request( "http://some.url.2" ); 


// 控制 转移 
yield; 


res.push( yield p2 ); 





我 们 不 准备 列 出 runALL(..) 的 代码 ， 不 仅 是 因为 其 可 能 因 太 长 而 使 文本 混乱 ， 
也 因为 它 是 我 们 在 前 面 run(..) 中 实现 的 逻辑 的 一 个 扩展 。 所 以 ， 我 们 把 它 
作为 一 个 很 好 的 扩展 练习 ， 请 试 着 从 run(..) 的 代码 演进 实现 我 们 设想 的 
runALL(..) 的 功能 。 我 的 asynquence 库 也 提供 了 一 个 前 面 提 过 的 runner(..) 
工具 ， 其 中 已 经 内 建 了 对 类 功能 的 支持 ， 这 将 在 本 部 分 的 附录 A 中 讨论 。 























以 下 是 runALL(.…) 内 部 运行 的 过 程 。 


(1) 第 一 个 生成 器 从 第 一 个 来 自 于 "http://some.url.1" 的 Ajax 响应 得 到 一 个 promise， 然 
后 把 控制 yield 回 runALL(..) 工具 。 

(2) 第 二 个 生成 器 运行 ， 对 于 "http://some.url.2" 实现 同样 的 操作 ， 把 控制 yield 回 
runALL(..) 工具 。 

(3) 第 一 个 生成 器 恢复 运行 ， 通 过 yield 传 出 其 promise p1。 在 这 种 情况 下 ，runALL(..) 工 
具 所 做 的 和 我 们 之 前 的 run(..) 一样 ， 因 为 它 会 等 待 这 个 promise 决议 ， 然 后 恢复 同一 
个 生成 器 (没有 控制 转移 ! )。p1 决议 后 ，runALL(..) 使 用 这 个 决议 值 再 次 恢复 第 一 个 
生成 器 ， 然 后 res[9] 得 到 了 自己 的 值 。 接 着 ,在 第 一 个 生成 器 完成 的 时 候 ， 有 一 个 隐 
式 的 控制 转移 。 

(4 第 二 个 生成 器 恢复 运行 ， 通 过 yield 传 出 其 promise Pp2， 并 等 待 其 决议 。 一 旦 决议 ， 
runALL(. .) 就 用 这 个 值 恢 复 第 二 个 生成 器 ， 设 置 res[1] 。 





























在 这 个 例子 的 运行 中 ， 我 们 使 用 了 一 个 名 为 res 的 外 层 变量 来 保存 两 个 不 同 的 Ajax 响应 结 
有 果 ， 我 们 的 并 发 协调 使 其 成 为 可 能 。 





但 是 ， 如 果 继 续 扩 展 runALL(..) 来 提供 一 个 内 层 的 变量 空间 ， 以 使 多 个 生成 器 实例 可 以 共 
享 ， 将 是 非常 有 帮助 的 ， 比 如 下 面 这 个 称 为 data 的 空 对 象 。 还 有 ， 它 可 以 接受 yield 的 非 
Promise 值 ， 并 把 它们 传递 到 下 一 个 生成 器 。 


考虑 : 


// request(..) 是 一 个 支持 Promise 的 Ajax 工 具 









































runAlll 
function*(data){ 
data.res = []; 
// 控制 转移 (以 及 消息 传递 ) 
var UrL1 = yield "http://some.url.2"; 
var p1 = request( url1 ); // "http://some.url.1" 
// 控制 转移 
yield; 
data.res.push( yield pl ); 
]， 
function*(data){ 
// 控制 转移 (以 及 消息 传递 ) 
var UrL2 = yield "http://some.url.1"; 
var p2 = request( UrL2 ); // "http://some.url.2" 
// 控制 转移 
yield; 
data.res.push( yield p2 ); 
} 
); 





在 这 一 方案 中 ， 实 际 上 两 个 生成 器 不 只 是 协调 控制 转移 ， 还 彼此 通信 ， 通 过 data.res 和 
yield 的 消息 来 交换 urtl 和 url2 的 值 。 真 是 极其 强大 | 





这 样 的 实现 也 为 被 称 作 通信 顺序 进程 (Communicating Sequential Processes，CSP) 的 更 高 
级 异步 技术 提供 了 一 个 概念 基础 。 对 此 ， 我 们 将 在 本 部 分 的 附录 B 中 详细 讨论 。 


Sm 
4.7” 形 实 转 换 程序 
目前 为 止 ， 我 们 已 经 假定 从 生成 器 yield 出 一 个 Promise， 并 且 让 这 个 Promise 通过 一 个 像 
run(..) 这 样 的 辅助 函数 恢复 这 个 生成 器 ， 这 是 通过 生成 器 管理 异步 的 最 好 方法 。 要 知道 ， 
事实 的 确 如 此 。 
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但 是 ， 我 们 忽略 了 另 一 种 广泛 使 用 的 模式 。 为 了 完整 性 ， 我 们 来 简要 介绍 一 下 这 种 模式 。 


在 通用 计算 机 科学 领域 ， 有 一 个 早期 的 前 JavaScript 概念 ， 
我 们 这 里 将 不 再 陷入 历史 考据 的 记 沼 ， 而 是 直接 给 日 


尔 为 形 实 转换 程序 (thunk)。 
H 形 实 转换 程序 的 一 个 狭义 表述 : 





JavaScript 中 的 thunk 是 指 一 个 用 于 调用 另外 一 个 函数 的 函数 ， 没 有 任何 参数 。 


换 句 话说 ， 你 用 一 个 函数 定义 封装 函数 调用 ， 包 括 需 要 的 任何 参数 ， 来 定义 这 个 调用 的 执 
行 ， 那 么 这 个 封装 函数 就 是 一 个 形 实 转 换 程序 。 之 后 在 执行 这 个 thunk 时 ， 最 终 就 是 调用 


了 原始 的 函数 。 
举例 来 说 : 


function foo(x,y) { 
return x + y; 


3} 


function fooThunk() { 
return foo( 3, 4 ); 


} 
// 将 来 
console.log( fooThunk() ); 


i 


所 以 ， 同 步 的 thunk 是 非 





// 7 
的 。 但 如 果 是 异步 的 thunk 呢 ? 我 们 可 以 把 这 个 狭窄 的 




















党 人 简 忆 





thunk 定义 扩展 到 包含 让 它 接收 一 个 


考虑 : 


function foo(x,y,cb) { 
setTimeout( function() 
cb( x+y); 
}, 1000 ); 
} 


function fooThunk(cb) { 
foo( 3, 4, cb ); 
} 


// 将 来 
fooThunk( function(sum){ 


console.log( sum ); 


Po 


回调 。 





{ 


// 7 


正如 所 见 ，fooThunk(..) 只 需要 一 个 参数 cb(..)， 因 为 它 已 经 有 预先 指定 的 值 3 和 4 (分 


别 作为 x 和 y) 可 以 传 给 fool.… 
个 回调 。 


)。thunk 就 耐心 地 等 待 它 完成 工作 所 需 的 最 后 一 部 分 : 那 





但 是 ， 你 并 不 会 想 手工 编写 thunk。 所 以 ， 我 们 发 明 一 个 工具 来 做 这 部 分 封装 工作 。 
考虑 : 


function thunkify(fn) { 
var args = [].slice.call( arguments, 1 ); 
return function(cb) { 
args.push( cb ); 
return fn.apply( null, args ); 


}; 
} 
var fooThunk = thunkify( foo, 3, 4 ); 
// 将 来 
fooThunk( function(sum) { 
console.log( sum ); /7 
} ); 








这 里 我 们 假定 原始 (foo(..)) 函 国 数 原 型 需要 的 可 调 放 在 最 后 的 位 置 ， 其 他 
参数 都 在 它 之 前 。 对 异步 JavaScript 函数 标准 来 说 ， 这 可 以 说 是 一 个 普遍 成 
立 的 标准 。 你 可 以 称 之 为 “callback-last 风格 ”。 如 果 出 于 某 种 原因 需要 处 理 
“callback-first 风格 ”原型 ， 你 可 以 构建 一 个 使 用 args.unshift(..) 而 不 是 


args.push(..) 的 工具 。 



































前 面 thunkify(..) 的 实现 接收 foo(..) 函数 引用 以 及 它 需 要 的 任意 参数 ， 并 返回 thunk 本 


身 (fooThunk(..))。 但 是 ， 0 型 方案 。 











一 | 





典型 的 方法 一 一 如 果 不 令 人 迷惑 的 话 一 一 并 不 是 thunkify(..) 构造 thunk 本 身 ， 而 是 
thunkify(..) 工具 产生 一 个 生成 thunk 的 函数 。 


考虑 : 


function thunkify(fn) { 
return function() { 
var args = [].slice.call( arguments ); 
return function(cb) { 
args.push( cb ); 
return fn.apply( null, args ); 
}; 
}; 
} 


Xl 
江 





此 处 主要 的 区 别 在 于 多 出 来 的 return function() { .. } 这 一 层 。 以 下 是 用 法 上 的 区 





var whatIsThis = thunkify( foo ); 


var fooThunk = whatIsThis( 3, 4 ); 





生成 器 | 275 


// 将 来 
fooThunk( function(sum) { 
console.log( sum ); //7 


上 


显然 ， 这 段 代码 暗藏 的 一 个 大 问题 是 : whatIsThis 调用 的 是 什么 。 并 不 是 这 个 thunk， 而 
是 某 个 从 foo(…) 调用 产生 thunk 的 东西 。 这 有 点 类 似 于 thunk 的 “工厂 ”。 似 乎 还 没有 任 
何 标准 约定 可 以 给 这 样 的 东西 命名 。 


所 以 我 的 建议 是 thunkory (thunk+factory)。 于 是 就 有 ，thunkify(..) 生成 一 个 thunkory， 
然后 thunkory 生成 thunk。 这 和 第 3 章 中 我 提议 promisory 出 于 同样 的 原因 : 





var fooThunkory = thunkify( foo ); 


var fooThunk1 
var fooThunk2 


fooThunkory( 3, 4 ); 
fooThunkory( 5, 6 ); 


// 将 来 


fooThunk1( function(sum) { 
console.log( sum ); A 
汪汪 


fooThunk2( function(sum) { 
console.log( sum ); /MY 411 
}); 


foo(..) 例子 要 求 回 调 的 风格 不 是 error-first 风格 。 当 然 ，error-first 风格 要 常 
见得 多 。 如 果 foo(..) 需要 满足 一 些 正统 的 错误 生成 期 望 ， 可 以 把 它 按照 期 
望 改 造 ， 使 用 一 个 error-first 回调 。 后 面 的 thunkify(..) 机 制 都 不 关心 回调 
的 风格 。 使 用 上 唯一 的 区 别 将 会 是 fooThunk1(function(err,sum){..。 























暴露 thunkory 方法 一 一 而 不 是 像 前 面 的 thunkify(..) 那样 把 这 个 中 间 步 又 隐藏 一 一 似乎 是 
不 必要 的 复杂 性 。 但 是 ， 一般 来 说 ， 在 程序 开头 构造 thunkory 来 封装 已 有 的 API 方 法， 并 
在 需要 thunk 时 可 以 传递 和 调用 这 些 thunkory， 是 很 有 用 的 。 两 个 独立 的 步骤 保留 了 一 个 
更 清晰 的 功能 分 离 。 


以 下 代码 可 说 明 这 一 点 : 





下 








// 更 简洁 : 
var fooThunkory = thunkify( foo ); 


var fooThunk1 
var fooThunk2 


fooThunkory( 3, 4 ); 
fooThunkory( 5, 6 ); 


// 而 不 是 : 





var fooThunk1 
var fooThunk2 


thunkify( foo, 3, 4 ); 
thunkify( foo, 5, 6 ); 





不 管 你 是 否 愿意 显 式 地 与 thunkory 打交道 ，thunk fooThunk1(..) 和 fooThunk2(..) 的 用 法 
都 是 一 样 的 。 


s/promise/thunk/ 
那么 所 有 这 些 关 于 thunk 的 内 容 与 生成 器 有 什么 关系 呢 ? 


可 以 把 thunk 和 promise 大 体 上 对 比 一 下 : 它们 的 特性 并 不 相同 ， 所 以 并 不 能 直接 互 换 。 
Promise 要 比 裸 thunk 功能 更 强 、 更 值得 信任 。 


但 从 另外 一 个 角度 来 说 ， 它 们 都 可 以 被 看 作 是 对 一 个 值 的 请 求 ， 回 答 可 能 是 异步 的 。 




















回忆 一 下 ， 在 第 3 章 里 我 们 定义 了 一 个 工具 用 于 promise 化 一 个 函数 ， 我 们 称 之 为 
Promise.wrap(..)， 也 可 以 将 其 称 为 promisify(..) | 这 个 Promise 封装 工具 并 不 产生 
Promise， 它 生成 的 是 promisory， 而 promisory 则 接着 产生 Promise。 这 和 现在 讨论 的 
thunkory 和 thunk 是 完全 对 称 的 。 











为 了 说 明 这 种 对 称 性 ， 我 们 要 首先 把 前 面 的 foo(…) 例子 修改 一 下 ， 改 成 使 用 error-first 风 
格 的 回调 : 














function foo(x,y,cb) { 
setTimeout( function(){ 
// 假定 cb(..) 是 error-first 风 格 的 
cb( nuLL，x + y ); 
}, 1000 ); 
} 


现在 我 们 对 比 一 下 thunkify(..) 和 promisify(..) ( 即 第 3 章 中 的 Promise.wrap(..)) 的 
使 用 : 
// 对 称 :构造 问题 提问 者 


var fooThunkory = thunkify( foo ); 
var foopPromisory = promisify( foo ); 





// 对 称 :提问 
var fooThunk = fooThunkory( 3, 4 ); 
var fooPromise = foopromisory( 3, 4 ); 


// 得 到 答案 
fooThunk( function(err ,sum){ 
if (err) { 
console.error( err ); 
} 
else { 
console.log( sum ); 大 
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} 
下 


// 得 到 promise 答 案 
foopromise 
.then( 
function(sum){ 
console.log( sum ); // 7 
}, 


function(err){ 
console.error( err ); 


} 
)3 
thunkory 和 promisory 本 质 上 都 是 在 提出 一 个 请 求 要求 一 个 值 )， 分别 由 thunk fooThunk 
和 promise fooPromise 表示 对 这 个 请 求 的 未 来 的 答复 。 这 样 考 虑 的 话 ， 这 种 对 称 性 就 很 清 
蜥 了。 


了 解 了 这 个 视角 之 后 ， 就 可 以 看 出 ，yield 出 Promise 以 获得 异步 性 的 生成 器 ， 也 可 以 为 
异步 性 而 yield thunk。 我 们 所 需要 的 只 是 一 个 更 智能 的 run(..) 工具 (就 像 前 面 的 一 样 )， 
不 但 能 够 寻找 和 链接 yield 出 来 的 Promise， 还 能 够 向 yield 出 来 的 thunk 提供 回调 。 


考虑 : 




















function *foo() { 
var val = yield request( "http://some.url.1" ); 
console.log( val ); 


run( foo ); 


在 这 个 例子 中 ，request(..) 可 能 是 一 个 返回 promise 的 promisory， 也 可 能 是 一 个 返回 
thunk 的 thunkory。 从 生成 器 内 部 的 代码 逻辑 的 角度 来 说 ， 我 们 并 不 关心 这 个 实现 细节 ， 这 
一 点 是 非常 强大 的 | 


于 是 ，request(..) 可 能 是 以 下 两 者 之 一 : 








// promisory request(..) (参见 第 3 章 ) 
var request = Promise.wrap( ajax ); 


// vs. 


// thunkory request(..) 
var request = thunkify( ajax ); 


最 后 ， 作 为 前 面 run(..) 工具 的 一 个 支持 thunk 的 补丁 ， 我 们 还 需要 这 样 的 逻辑 : 





AR 

// 我 们 收 到 返回 的 thunk 了 吗 ? 

else if (typeof next.vaLue == "function") { 
return new Promise( function(resoLve,reject){ 











// 用 error-first 回 调调 用 这 个 thunk 
next .vaLue( function(err ,msg) { 
if (err) { 
reject( err ); 














} 
else { 
resoLve( msg ); 
} 
} ); 
> 
.then( 
handLeNext， 
function handleErr(err) { 
return Promise.resolvel( 
it.throw( err ) 
) 
.then( handleResult ); 
} 
); 
} 


现在 ， 我们 的 生成 器 可 以 调用 promisory 来 yield Promise， 也 可 以 调用 thunkory 来 yield 
thunk。 不 管 哪 种 情况 ，run(..) 都 能 够 处 理 这 个 值 ， 并 等 待 它 的 完成 来 恢复 生成 器 运行 。 











从 对 称 性 来 说 ， 这 两 种 方案 看 起 来 是 一 样 的 。 但 应 该 指出 ， 这 只 是 从 代表 生成 器 的 未 来 值 
continuation 的 Promise 或 thunk 的 角度 说 才 是 正确 的 。 


从 更 大 的 角度 来 说 ，thunk 本 身 基本 上 没有 任何 可 信任 性 和 可 组 合 性 保证 ， 而 这 些 是 
Promise 的 设计 目标 所 在 。 单 独 使 用 thunk 作为 Pormise 的 替代 在 这 个 特定 的 生成 器 异步 模 
式 里 是 可 行 的 ， 但 是 与 Promise 具备 的 优势 (参见 第 3 章 ) 相 比 ， 这 应 该 并 不 是 一 种 理想 
方案 。 








如 果 可 以 选择 的 话 ， 你 应 该 使 用 yield pr 而 不 是 yield th。 但 对 run(..) 工具 来 说 ， 对 两 
种 值 类 型 都 能 提供 支持 则 是 完全 正确 的 。 














我 的 asynquence 库 ( 详 见 附录 A) 中 的 runner(..) 工具 可 以 处 理 Promise、 
thunk 和 asynquence 序列 的 yield。 











4.8 ES6 之 前 的 生成 器 

现在 ， 希 望 你 已 经 相信 ， 生 成 器 是 异步 编程 工具 箱 中 新 增 的 一 种 非常 重要 的 工具 。 但 是 ， 
这 是 ES6 中 新 增 的 语法 ， 这 意味 着 你 没 法 像 对 待 Promise (这 只 是 一 种 新 的 API) 那样 使 
用 生成 器 。 所 以 如 果 不 能 忽略 ES6 前 的 浏览 器 的 话 ， 怎 么 才能 把 生成 器 引入 到 我 们 的 浏览 
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器 JavaScript 中 呢 ? 


对 ES6 中 所 有 的 语法 扩展 来 说 ， 都 有 工具 (最 常见 的 术语 是 transpiler， 指 trans-compiler， 
翻译 编译 器 ) 用 于 接收 ES6 语法 并 将 其 翻译 为 等 价 (但 是 显然 要 丑陋 一 些 ! ) 的 前 ES6 代 
码 。 因 此 ， 生 成 器 可 以 被 翻译 为 具有 同样 功能 但 可 以 工作 于 ES5 及 之 前 的 代码 。 

















可 怎么 实现 呢 ? 显然 yield 的 “魔法 ”看 起 来 并 不 那么 容易 翻译 。 实 际 上 ， 我 们 之 前 在 讨 
论 基 于 闭 包 的 迭代 器 时 已 经 暗示 了 一 种 解决 方案 。 





4.8.1 手工 变换 


在 讨论 transpiler 之 前 ， 先 来 推导 一 下 对 生成 器 来 说 手工 变换 是 如 何 实现 的 。 这 不 只 是 一 个 
里 论 上 的 练习 ， 因 为 这 个 练习 实际 上 可 以 帮助 我 们 更 深入 理解 其 工作 原理 。 


考虑 : 

















YH 











// request(..) 是 一 个 支持 Promise 的 Ajax 工 具 


function *foo(url) { 
try { 
console.log( "requesting:", url ); 
var val = yield request( url ); 
console.log( val ); 


catch (err) { 
console.log( "0ops:"，err ); 


return false; 


} 


var it = foo( "http://some.url.1" ); 


首先 要 观察 到 的 是 ， 我 们 仍然 需要 一 个 可 以 调用 的 普通 函数 foo()， 它 仍然 需要 返回 一 个 
迭代 器 。 因 此 ， 先 把 非 生成 二 变 换 的 轮廓 刻画 出 来 : 


function foo(url) { 














yh 
// 构造 并 返回 一 个 迭代 器 
return { 
next: function(v) { 
// .. 
}, 
throw: function(e) { 
7 人 
} 
并 
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var it = foo( "http://some.url.1" ); 


接 下 来 要 观察 到 的 是 ， 


生成 器 是 通过 暂停 自己 的 作用 域 /状态 实现 它 的 “魔法 ”的 。 可 以 


通过 函数 闭 包 (参见 本 系列 的 《你 不 知道 的 JavaScript (上 卷 )》 的 “作用 域 和 闭 包 ” 部 分 ) 





来 模拟 这 一 点 。 为 了 到 


态 值 : 

















E 解 这 样 的 代码 是 如 何 编写 的 ， 我 们 先 给 生成 器 的 各 个 部 分 标注 上 状 


// request(..) 是 一 个 支持 Promise 的 Ajax 工 具 





function *foo(url) { 


// 状态 1 


try { 


console.log( "requesting:", url ); 


var TMP1 


// 状态 2 


= request( url ); 


var val = yield TMP1; 
console.log( val ); 


catch (err) { 


// 状态 3 


console.log( "Oops:", err ); 
return false; 








为 了 更 精确 地 展示 ， 我 们 使 用 临时 变量 TMP1 val = yield request.. 语句 
分 成 了 两 个 部 分 。request(..) 在 状态 1 发 生 ， 其 完成 值 赋 给 val 发 生 在 状态 
2。 当 我 们 把 代码 转换 成 其 非 生成 器 等 价 时 ， ee 量 TMP1。 

















换 句 话说 ，1 是 起 始 状 态 ，2 是 request(..) 成 功 后 的 状态 ，3 是 request(..) 失败 的 状态 。 
你 大 概 能 够 想象 出 如 何 把 任何 额外 的 yield 步骤 编码 为 更 多 的 状态 。 





回 到 我 们 翻译 的 生成 器 





， 让 我 们 在 闭 包 中 定义 一 个 变量 state 用 于 跟踪 状态 : 





function foo(url) { 
// 管理 生成 器 状态 


var state; 


//.. 
} 


现在 在 闭 包 内 定义 一 个 内 层 函 数 ， 称 为 process(..)， 使 用 switch 语句 处 理 每 个 状态 : 


// request(..) 是 一 个 支持 Promise 的 Ajax 工 具 





function foo(url) { 
// 管理 生成 器 状态 
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var state; 





// 生成 器 范围 变量 声明 
Var val; 

















function process(v) { 
switch (state) { 
Case 1: 
console.log( "requesting:", url ); 
return request( url ); 
Case 2: 
val = v; 
console.log( val ); 
return; 
Case 3: 
var err = v; 
console.log( "0ops:"，err ); 
return false; 


} 


//.. 
二 
我 们 生成 器 的 每 个 状态 都 在 switch 语句 中 由 自己 的 case 表示 。 每 次 需要 处 理 一 个 新 状态 
的 时 候 就 会 调用 process(..)。 稍 后 我 们 将 会 回来 介绍 这 是 如 何 工作 的 。 


对 于 每 个 生成 器 级 的 变量 声明 (val)， 我 们 都 把 它 移动 为 process(……) 外 的 一 个 val 声明 ， 
这 样 它们 就 可 以 在 多 个 process(.…) 调用 之 间 存 活 。 不 过 块 作用 域 的 变量 err 只 在 状态 3 
中 需要 使 用 ， 所 以 把 它 留 在 原来 的 位 置 。 














在 状态 1， 没 有 了 yield resolve(..)， 我 们 所 做 的 是 return resolve(..)。 在 终止 状态 2， 
没有 显 式 的 return， 所 以 我 们 只 做 一 个 return， 这 等 价 于 return undefined。 在 终止 状态 
3， 有 一 个 return false， 因 此 就 保留 这 一 句 。 





现在 需要 定义 迭代 器 函数 的 代码 ， 使 这 些 函数 正确 调用 process(..): 


function foo(url) { 
// 管理 生成 器 状态 


var state; 











// 生成 器 变量 范围 声明 
Var val; 














function process(v) { 
switch (state) { 

Case 1: 
console.log( "requesting:", url ); 
return request( url ); 

Case 2: 
val = v; 
console.log( val ); 





return; 
Case 3: 
var err = V; 
console.log( "0ops:"，err ); 
return false; 


3 


// 构造 并 返回 一 个 生成 器 
return { 
next: function(v) { 
// 初始 状态 
if (!state) { 
state = 1; 
return { 
done: false, 
value: process() 











二 
} 
// yield 成 功 恢复 
else if (state == 1) { 
state = 2; 
return { 
done: true, 
value: process( v ) 


} 
// 生成 器 已 经 完成 


else { 
return { 
done: true, 
value: undefined 
}3 
} 
}, 
"throw": function(e) { 
// 唯一 的 显 式 错误 处 理 在 状态 1 
if (state == 1) { 
state = 3; 
return { 
done: true, 
value: process( e ) 


}; 
} 


// 否则 错误 就 不 会 处 理 , 所 以 只 把 它 所 
else { 
throw e; 


























回 





} 
} 
和 
} 


这 段 代 码 是 如 何 工作 的 呢 ? 
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(1) 对 迭代 器 的 next() 的 第 一 个 调用 会 把 生成 器 从 未 初始 化 状态 转移 到 状态 1， 然 后 调用 
process() 来 处 理 这 个 状态 。request(..) 的 返回 值 是 对 应 Ajax 响应 的 promise， 作 为 
value 属性 从 next() 调用 返回 。 









































(2) 如 果 Ajax 请 求 成 功 ， 第 二 个 next(..) 调用 应 该 发 送 Ajax 响应 值 进 来 ， 这 会 把 状态 转 
移 到 状态 2。 再 次 调用 process(..) (这 次 包括 传人 的 Ajax 响应 值 )， 从 next(..) 返回 
的 value 属性 将 是 undefined。 














(3) 然而 ， 如 果 Ajax 请 求 失败 的 话 ， 就 会 使 用 错误 调用 throw(..)， 这 会 把 状态 从 1 转移 到 
3 (而 非 2)。 再 次 调用 process(..)， 这 一 次 包含 错误 值 。 这 个 case 返回 false， 被 作 
为 throw(..) 调用 返回 的 value 属性 。 





从 外 部 来 看 〈 也 就 是 说 ， 只 与 迭代 器 交互 )， 这 个 普通 国 数 foo(..) 与 生成 器 *foo(..) 的 
工作 几乎 完全 一 样 。 所 以 我 们 已 经 成 功 地 把 ES6 生成 器 转 为 了 前 ES6 兼容 代码 ! 


然后 就 可 以 手工 实例 化 生成 器 并 控制 它 的 迭代 器 了 ， 调 用 var it = foo("..") 和 
it.next(..) 等 。 其 至 更 好 的 是 ， 我 们 可 以 把 它 传 给 前 面 定义 的 工具 run(..)， 就 像 


run(foo,".."), 

















4.8.2 自动 转换 

前 面 的 ES6 生成 器 到 前 ES6 等 价 代码 的 手工 推导 练习 ， 向 我 们 教授 了 概念 上 生成 器 是 如 何 
工作 的 。 但 是 ， 这 个 变换 非常 复杂 ， 并 且 对 于 代码 中 的 其 他 生成 器 而 言 也 是 不 可 移植 的 。 
这 部 分 工作 通过 手工 实现 十 分 不 实际 ， 会 完全 抵消 生成 器 的 一 切 优势 。 

但 幸运 的 是 ， 已 经 有 一 些 工 具 可 以 自动 把 ES6 生成 器 转化 为 前 面 小 节 中 我 们 推导 出 来 的 
结果 那样 的 代码 。 它 们 不 仅 会 为 我 们 完成 这 些 笨重 的 工作 ， 还 会 处 理 我 们 忽略 的 几 个 校 市 
问题 。 






































regenerator 就 是 这 样 的 一 个 工具 (http://facebook.github.io/regenerator/)， 出 自 Facebook 的 
几 个 聪明 人 。 


如 果 使 用 regenerator 来 转换 前 面 的 生成 器 的 话 ， 以 下 是 产生 的 代码 (本 书写 作 之 时 ) : 














// request(..) 是 一 个 支持 Promise 的 Ajax 工 具 


var foo = regeneratorRuntime.mark(function foo(CurL) { 
var val; 


return regeneratorRuntime.wrap(function foo$(context$1$0) { 
while (1) switch (context$1$0.prev = context$1$0.next) { 
case 0: 
context$1$0.prev = 0; 
console.log( "requesting:", url ); 
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context$1$0.next = 4; 
return request( url ); 
case 4: 
val = context$1$0.sent; 
console.log( val ); 
context$1$0.next = 12; 
break; 
Case 8: 
context$1$0.prev = 8; 
context$1$0.t0 = context$1$0.catch(0); 
console.log("Oops:", context$1$0.t0); 
return context$1$0.abrupt("return", false); 
Case 12: 
case "end": 
return context$1$0.stop(); 


} 
}, foo, this, [[0, 8]]); 
于 
这 与 我 们 手工 推导 的 结果 有 一 些 明显 的 相似 之 处 ， 比 如 那些 switch/case 语句 ， 而 且 我 们 
其 至 看 到 了 移出 闭 包 的 vaL， 就 像 我 们 做 的 一 样 。 


当然 ， 一 个 不 同 之 处 是 ，regenerator 的 变换 需要 一 个 辅助 库 regeneratorRuntime， 其 中 包 
含 了 管理 通用 生成 器 和 达 代 器 的 所 有 可 复 用 逻辑 。 这 些 重 复 代 码 中 有 很 多 和 我 们 的 版 本 不 
同 ， 但 即使 这 样 ， 很 多 概念 还 是 可 以 看 到 的 ， 比 如 context$1$0.next = 4 记录 生成 器 的 下 
一 个 状态 。 





























主要 的 收获 是 ， 生 成 器 不 再 局 限于 只 能 在 ES6+ 环境 中 使 用 。 一 旦 理解 了 这 些 概念 ， 就 可 
以 在 代码 中 使 用 ， 然 后 使 用 工具 将 其 变换 为 与 日 环境 兼容 的 代码 。 


这 比 仅仅 将 修改 后 的 Promise API 用 作 前 ES6 Promise 所 做 的 工作 要 多 得 多 ， 但 是 ， 付 出 的 
代价 是 值得 的 ， 因 为 在 实现 以 合理 的 、 明 智 的 、 看 似 同步 的 、 顺 序 的 方式 表达 异步 流程 方 
面 ， 生 成 器 的 优势 太 多 了 。 























一 旦 迷 上 了 生成 器 ， 就 再 也 不 会 想 回 到 那 一 团 乱 麻 的 异步 回调 地 狱 中 了 。 


4.9 ”小 结 


生成 器 是 ES6 的 一 个 新 的 函数 类 型 ， 它 并 不 像 普 通 函 数 那样 总 是 运行 到 结束 。 取 而 代 之 
的 是 ， 生 成 器 可 以 在 运行 当中 (完全 保持 其 状态 ) 暂停 ， 并 且 将 来 再 从 暂停 的 地 方 恢复 


运 




















fs 
行 。 
这 种 交替 的 暂停 和 恢复 是 合作 性 的 而 不 是 抢占 式 的 ， 这 意味 着 生成 器 具有 独一无二 的 能 


来 暂停 自身 ， 这 是 通过 关键 字 yield 实现 的 。 不 过 ， 只 有 控制 生成 器 的 迭代 器 具有 恢复 生 
成 器 的 能 力 (通过 next(..))。 
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yield/next(..) 这 一 对 不 只 是 一 种 控制 机 制 ， 实 际 上 也 是 一 种 双向 消息 传递 机 制 。yield … 表 


达 式 本 质 上 是 暂停 下 来 等 待 某 个 值 ， 接 下 来 的 next(..) 调用 会 向 被 暂停 的 yield 表达 式 传 回 





一 个 值 (或 者 是 隐 式 的 undefined)。 
在 异步 控制 流程 方面 ， 生 成 器 的 关键 优点 是 ， 生成 器 内 部 的 代码 是 以 自然 的 同步 /顺序 方 








式 表 达 任 务 的 一 系列 步 又。 其 技巧 在 于 ， 我 们 把 可 能 的 异步 隐藏 在 了 关键 字 yield 的 后 面 ， 























把 异步 移动 到 控制 生成 器 的 迭代 器 的 代码 部 分 。 


换 名 话说 ， 生 成 器 为 异步 代码 保持 了 顺序 、 同 步 、 阻 塞 的 代码 模式 ， 这 使 得 大 脑 可 以 更 自 





然 地 追踪 代码 ， 解 决 了 基于 回调 的 异步 的 两 个 关键 缺陷 之 一 。 
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程序 性 能 





到 目前 为 止 ， 本 书 的 内 容 都 是 关于 如 何 更 加 有 效 地 利用 异步 模式 。 但 是 ， 我 们 并 没有 直接 
六 述 为 什么 异步 对 JavaScript 来 说 真 的 很 重要 。 最 显而易见 的 原因 就 是 性 能 。 

举例 来 说 ， 如 果 要 发 出 两 个 Ajax 请 求 ， 并 且 它 们 之 间 是 彼此 独立 的 ， 但 是 需要 等 待 两 个 
请 求 都 完成 才能 执行 下 一 步 的 任务 ， 那 么 为 这 个 交互 建 模 有 两 种 选择 ， 顺 序 与 并 发 。 

可 以 先 发 出 第 一 个 请 求 ， 然 后 等 待 第 一 个 请 求 结束 ， 之 后 发 出 第 二 个 请 求 。 或 者 ， 就 像 我 
们 在 promise 和 生成 器 部 分 看 到 的 那样， 也 可 以 并 行 发 出 两 个 请 求 ， 然 后 用 门 模式 来 等 待 
两 个 请 求 完成 ， 之 后 再 继续 。 

显然 ， 通 常 后 一 种 模式 会 比 前 一 种 更 高 效 。 而 更 高 的 性 能 通常 也 会 带 来 更 好 的 用 户 体验 。 
甚至 有 可 能 异步 (交替 执行 的 并 发 ) 只 能 够 提高 感觉 到 的 性 能 ， 而 整体 来 说 ， 程 序 完成 的 
时 间 还 是 一 样 的 。 用 户 感知 的 性 能 和 实际 可 测 的 性 能 一 样 重要 ， 如 果 不 是 更 重要 的 话 ! 
现在 我 们 不 再 局 限于 局 部 化 的 异步 模式 ， 而 是 将 在 程序 级 别 上 讨论 更 大 图 景 下 的 性 能 
细节 。 







































































你 可 能 想 要 了 解 一 些微 性 能 问题 ， 比 如 at+ 和 ++a 哪个 更 快 。 这 一 类 性 能 细 
节 将 在 第 6 章 中 讨论 。 
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5.1 Web Worker 


如 果 你 有 一 些 处 理 密集 型 的 任务 要 执行 ， 但 不 希望 它们 都 在 主线 程 运 行 (这 可 能 会 减 慢 浏 
览 器 /UI) ， 可 能 你 就 会 希望 JavaScript 能 够 以 多 线程 的 方式 运行 。 





在 第 1 章 里 ， 我 们 已 经 详细 介绍 了 JavaScript 是 如 何 单线 程 运作 的 。 但 是 ， 单 线程 并 不 是 
组 织 程序 执行 的 唯一 方式 。 


设想 一 下 ， 把 你 的 程序 分 为 两 个 部 分 : 一 部 分 运行 在 主 UI 线程 下 ， 另 外 一 部 分 运行 在 另 
一 个 完全 独立 的 线程 中 。 


这 样 的 架构 可 能 会 引出 哪些 方面 的 问题 呢 ? 



































一 个 就 是 ， 你 会 想 要 知道 在 独立 的 线程 运行 是 否 意味 着 它 可 以 并 行 运 行 〈 在 多 CPU/ 核 
心 的 系统 上 )， 这 样 第 二 个 线程 的 长 时 间 运 行 就 不 会 阻塞 程序 主线 程 。 否 则 ， 相 比 于 
JavaScript 中 已 有 的 异步 并 发 ， “虚拟 多 线程 ”并 不 会 带 来 多 少 好 处 。 

















你 还 会 想 知道 程序 的 这 两 个 部 分 能 否 访问 共享 的 作用 域 和 资源 。 如 果 可 以 的 话 ， 那 你 就 将 
遇 到 多 线程 语言 (Java、C++ 等 ) 要 面 对 的 所 有 问题 ， 比 如 需要 合作 式 或 抢占 式 的 锁 机 制 
(mutex 等 )。 这 是 相当 多 的 额外 工作 ， 不 要 小 看 。 

















还 有 ， 如 果 这 两 个 部 分 能 够 共享 作用 域 和 资源 的 话 ， 你 会 想 要 知道 它们 将 如 何 通 信 。 

在 我 们 对 Web 平台 HTMLS5 的 一 个 叫 作 Web Worker 的 新 增 特 性 的 探索 过 程 中 ， 这 些 都 是 
很 好 的 问题 。 这 是 浏览 器 ( 即 宿主 环境 ) 的 功能 ， 实 际 上 和 JavaScript 语言 本 身 儿 平 没 什 
么 关系 。 也 就 是 说 ，JavaScript 当前 并 没有 任何 支持 多 线程 执行 的 功能 。 








但 是 ， 像 你 的 浏览 器 这 样 的 环境 ， 很 容易 提供 多 个 JavaScript 引擎 实例 ， 各 自 运 行 在 自己 
的 线程 上 ， 这 样 你 可 以 在 每 个 线程 上 运行 不 同 的 程序 。 程 序 中 每 一 个 这 样 的 独立 的 多 线程 
部 分 被 称 为 一 个 《Web) Worker。 这 种 类 型 的 并 行 化 被 称 为 任务 并 行 ， 因 为 其 重点 在 于 把 
程序 划分 为 多 个 块 来 并 发 运行 。 


从 JavaScript 主 程序 (或 男 一 个 Worker) 中 ， 可 以 这 样 实例 化 一 个 Worker: 




















var wl = new Worker( "http://some.url.1/mycoolworker .js" ); 
这 个 URL 应 该 指向 一 个 JavaScript 文件 的 位 置 (而 不 是 一 个 HTML 页 面 ! )， 这 个 文件 将 


被 加 载 到 一 个 Worker 中 。 然 后 浏览 器 启动 一 个 独立 的 线程 ， 让 这 个 文件 在 这 个 线程 中 作 
为 独立 的 程序 运行 。 




















这 种 通过 这 样 的 URL 创建 的 Worker 称 为 专用 Worker (Dedicated Worker)。 
除了 提供 一 个 指向 外 部 文件 的 URL， 你 还 可 以 通过 提供 一 个 Blob URL ( 另 
外 一 个 HTML5 特性 ) 创建 一 个 在 线 Worker (Inline Worker)， 本 质 上 就 是 一 
个 存储 在 单个 (二进制 ) 值 中 的 在 线 文件 。 不 过 ，Blob 已 经 超出 了 我 们 这 里 
的 讨论 范围 。 






































Worker 之 间 以 及 它们 和 主 程序 之 间 ， 不 会 共享 任何 作用 域 或 资源 ， 那 会 把 所 有 多 线程 编程 
的 赴 梦 带 到 前 端 领域 ， 而 是 通过 一 个 基本 的 事件 消息 机 制 相互 联系 。 








Worker wl1 对 象 是 一 个 事件 侦 听 者 和 触发 者 ， 可 以 通过 订阅 它 来 获得 这 个 Worker 发 出 的 事 
件 以 及 发 送 事件 给 这 个 Worker。 





以 下 是 如 何 侦 听 事件 (其实 就 是 固定 的 "message" 事件 ) : 





w1.addEventListener( "message", function(evt){ 
// evt.data 
下 得 


也 可 以 发 送 "message" 事件 给 这 个 Worker: 


w1.postMessage( "something cool to say" ); 
在 这 个 Worker 内 部 ， 收 发 消息 是 完全 对 称 的 : 
// "mycoolworker .js" 
addEventListener( "message", function(evt){ 
// evt.data 


} ); 


postMessage( "a really cool reply" ); 


注意 ， 专 用 Worker 和 创建 它 的 程序 之 间 是 一 对 一 的 关系 。 也 就 是 说 ，"message" 事件 
没有 任何 歧义 需要 消除 ， 因 为 我 们 确定 它 只 能 来 自 这 个 一 对 一 的 关系 : 它 要 么 来 自 这 个 
Worker， 要 么 来 自主 页 面 。 


| 














通 第 由 主页 面 应 用 程序 创建 Worker， 但 若是 需要 的 话 ，Worker 也 可 以 实例 化 它 自 己 的 子 
Worker， 称 为 sabworker。 有 了 时候 ， 把 这 样 的 细节 委托 给 一 个 “ 主 ”Worker， 由 它 来 创建 
其 他 Worker 处 理 部 分 任务 ， 这 样 很 有 有 用。 不 幸 的 是 ， 到 写作 本 书 时 为 止 ，Chrome 还 不 支 
持 subworker， 不 过 Firefox 支持 。 














要 在 创建 Worker 的 程序 中 终止 Worker， 可 以 调用 Worker 对 象 ( 就 像 前 面 代 码 中 的 w1) 
上 的 terminate()。 突 然 终止 Worker 线程 不 会 给 它 任何 机 会 完成 它 的 工作 或 者 清理 任何 资 
源 。 这 就 类 似 于 通过 关闭 训 览 器 标签 页 来 关闭 页 面 。 
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Worker。 


























如 果 浏 览 器 中 有 两 个 或 多 个 页 面 (或 同一 页 上 的 多 个 tab ! ) 试图 从 同一 个 文件 URL 创 
建 Worker， 那 么 最 终 得 到 的 实际 上 是 完全 独立 的 Worker。 后 面 我 们 会 简单 介绍 如 何 共 享 

















看 起 来 似乎 恶意 或 无 知 的 JavaScript 程序 只 要 在 一 个 系统 中 生成 上 百 个 


Worker, 
务 攻 击 。 
线程 上 ， 


让 每 个 Worker 运行 在 低级 独立 的 线程 上 ， 就 能 够 以 此 制造 拒绝 服 
尽管 这 确实 从 某 种 程度 上 保证 了 每 个 Worker 将 运行 在 自己 的 独立 
日 是 这 个 保证 并 不 是 之 无 限度 的 。 系 统 能 够 决定 可 以 创建 多 少 个 实 











际 的 线程 /CPU/ 核心 。 没 有 办 法 预测 或 保证 你 能 够 访问 多 少 个 可 用 线程 ， 尽 
管 很 多 人 假定 至 少 可 以 达到 CPU/ 核心 的 数量 。 我 认为 最 安全 的 假定 就 是 在 
主 UI 线程 之 外 至 少 还 有 一 个 线程 ， 就 是 这 样 。 








5.1.1 Worker 环境 


在 Worker 内 部 是 无 法 访问 主 程序 的 任何 资源 的 。 这 意味 着 你 不 能 访问 它 的 任何 全 局 变量 ， 
也 不 能 访问 页 面 的 DOM 或 者 其 他 资源 。 记 住 ， 这 是 一 个 完全 独立 的 线程 。 

















但 是 ， 你 可 以 执行 网 络 操作 (Ajax、WebSockets) 以 及 设 定 定时 器 。 还 有 ，Worker 可 
以 访问 儿 个 重要 的 全 局 变量 和 功能 的 本 地 复 本 ， 包 括 navigator、location、JSON 和 


appLicationCache。 


你 还 可 以 通过 importScripts(..) 向 Worker 加 载 额外 的 JavaScript 脚本 : 


// 在 Worker 内 部 





importScripts( "foo.js", "bar.js" ); 


这 些 脚 本 加 载 是 同步 的 。 也 就 是 说 ，importscripts(..) 调用 会 阻塞 余下 Worker 的 执行 ， 
直到 文件 加 载 和 执行 完成 。 


另外 ， 已 经 有 一 些 讨论 涉及 把 <canvas>API 暴露 给 Worker， 以 及 把 canvas 变 
为 Transferable (参见 5.1.2 节 )， 这 将 使 Worker 可 以 执行 更 高 级 的 off-thread 








图 形 处 理 ， 这 对 于 高 性 能 游戏 (WebGL) 
管 目 前 的 浏览 器 中 还 不 存在 这 种 支持 ， 但 很 可 能 不 远 的 将 来 就 会 有 。 





和 其 他 类 似 的 应 用 是 很 有 用 的 。 尽 


Web Worker 通常 应 用 于 哪些 方面 呢 ? 


。 处 理 密集 型 数学 计算 





。 大 数据 集 排序 


。 数据 处 理 (压缩 、 音 频 分 析 、 图 像 处 理 等 ) 





。 高 流量 网 络 通信 





5.1.2 ”数据 传递 
你 可 能 已 经 注意 到 这 些 应 用 中 的 大 多 数 有 一 个 共性 ， 就 是 需要 在 线程 之 间 通 过 事件 机 制 传 
递 大 量 的 信息 ， 可 能 是 双向 的 。 


在 早期 的 Worker 中 ， 唯 一 的 选择 就 是 把 所 有 数据 序列 化 到 一 个 字符 串 值 中 。 除 了 双向 序 
列 化 导致 的 速度 损失 之 外 ， 男 一 个 主要 的 负面 因素 是 数据 需要 被 复制 ， 这 意味 着 两 倍 的 内 
存 使 用 (及 其 引起 的 垃圾 收集 方面 的 波动 )。 


谢 天 谢 地 ， 现 在 已 经 有 了 一 些 更 好 的 选择 。 








如 果 要 传递 一 个 对 象 ， 可 以 使 用 结构 化 克隆 算法 (structured clone algorithm) (https:// 
developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm) 把 这 个 
对 象 复制 到 另 一 边 。 这 个 算法 非常 高 级 ， 甚 至 可 以 处 理 要 复制 的 对 象 有 循环 引用 的 情况 。 这 
样 就 不 用 付出 to-string 和 from-string 的 性 能 损失 了 ， 但 是 这 种 方案 还 是 要 使 用 双 倍 的 内 存 。 
IE10 及 更 高 版 本 以 及 所 有 其 他 主流 浏览 器 都 支持 这 种 方案 。 





还 有 一 个 更 好 的 选择 ， 特 别 是 对 于 大 数据 集 而 言 ， 就 是 使 用 Transferable 对 象 〔http:// 
updates.htmlSrocks.com/2011/12/Transferable-Objects-Lightning-Fast)。 这 时 发 生 的 是 对 象 所 
有 权 的 转移 ， 数 据 本 身 并 没有 移动 。 一 旦 你 把 对 象 传递 到 一 个 Worker 中 ， 在 原来 的 位 置 
上 ， 它 就 变 为 空 的 或 者 是 不 可 访问 的 ， 这 样 就 消除 了 多 线程 编程 作用 域 共 享 带 来 的 混乱 。 
当然 ， 所 有 权 传 递 是 可 以 双向 进行 的 。 


























如 果 选 择 Transferable 对 象 的 话 ， 其 实 不 需要 做 什么 。 任 何 实现 了 Transferable 接口 
(http:/developer.mozilla.org/en-US/docs/Web/APITransferable) 的 数据 结构 就 自动 按照 这 种 
方式 传输 (Firefox 和 Chrome 都 支持 ) 。 


举例 来 说 ， 像 Uint8Array 这 样 的 带 类 型 的 数组 (参见 本 系列 的 《你 不 知道 的 JavaScript 
(下 卷 )》 的 “ES6 & Beyond” 部 分 ) 就 是 Transferable。 下 面 是 如 何 使 用 postMessage(..) 
发 送 一 个 Transferable 对 象 : 





// 比如 foo 是 一 个 Uint8Array 


postMessage( foo.buffer, [ foo.buffer ] ); 





第 一 个 参数 是 一 个 原始 缓冲 区 ， 第 二 个 是 一 个 要 传输 的 内 容 的 列表 。 


不 支持 Transferable 对 象 的 浏览 器 就 降级 到 结构 化 克隆 ， 这 会 带 来 性 能 下 降 而 不 是 彻底 的 
功能 失效 。 








5.1.3 共享 Worker 
如 果 你 的 站 点 或 app 允许 加 载 同 一 个 页 面 的 多 个 tab (一 个 常见 的 功能 )， 那 你 可 能 非常 希 























望 通过 防止 重复 专用 Worker 来 降低 系统 的 资源 使 用 。 在 这 一 方面 最 常见 的 有 限 资 源 就 是 
socket 网 络 连接 ， 因 为 浏览 器 限制 了 到 同一 个 主机 的 同时 连接 数目 。 当 然 ， 限 制 来 自 于 同 
一 客户 端的 连接 数 也 减轻 了 你 的 资源 压力 。 


在 这 种 情况 下 ， 创 建 一 个 整个 站 点 或 app 的 所 有 页 面 实例 都 可 以 共享 的 中 心 Worker 就 非 
常 有 用 了 。 


























这 称 为 Sharedworker， 可 通过 下 面 的 方式 创建 (只 有 Firefox 和 Chrome 支持 这 一 功能 ) : 











var wl = new SharedWorker( "http://some.url.1/mycoolworker.js" ); 





因为 共享 Worker 可 以 与 站 点 的 多 个 程序 实例 或 多 个 页 面 连接 ， 所 以 这 个 Worker 需要 通过 
某 种 方式 来 得 知 消息 来 自 于 哪个 程序 。 这 个 唯一 标识 符 称 为 竟 口 (port)， 可 以 类 比 网 络 
socket 的 端口 。 因 此 ， 调 用 程序 必须 使 用 Worker 的 port 对 象 用 于 通信 : 












































w1.port.addEventListener( "message", handleMessages ); 


//.. 


w1.port.postMessage( "something cool" ); 
还 有 ， 端 口 连接 必须 要 初始 化 ， 形 式 如 下 : 


w1.port.start(); 





在 共享 Worker 内 部 ， 必 须要 处 理 额 外 的 一 个 事件 :"connect"。 这 个 事件 为 这 个 特定 的 连 
接 提供 了 端口 对 象 。 保 持 多 个 连接 独立 的 最 简单 办 法 就 是 使 用 port 上 的 闭 包 (参见 本 系列 
《你 不 知道 的 JavaScript (上 卷 )》 的 “作用 域 和 闭 包 ” 部 分 )， 就 像 下 面 的 代码 一 样 ， 把 这 
个 链接 上 的 事件 侦 听 和 传递 定义 在 "connect" 事件 的 处 理 函 数 内 部 : 


// 在 共享 Worker 内 部 
addEventListener( "connect", function(evt){ 


// 这 个 连接 分 配 的 端口 


var port = evt.ports[0]; 









































port.addEventListener( "message", function(evt){ 


//.. 


port.postMessage( .. ); 


Ve 
上 六; 


// 初始 化 端口 连接 
port .start(); 
目光 











除了 这 个 区 别 之 外 ， 共 享 和 专用 Worker 在 功能 和 语义 方面 都 是 一 样 的 。 








如 果 有 某 个 端口 连接 终止 而 其 他 端口 连接 仍然 活跃 ， 那 么 共享 Worker 不 会 
终止 。 而 对 专用 Worker 来 说 ， 只 要 到 实例 化 它 的 程序 的 连接 终止 ， 它 就 会 
终止。 








5.1.4 模拟 Web Worker 


从 性 能 的 角度 来 说 ， 将 Web Worker 用 于 并 行 运行 JavaScript 程序 是 非常 有 吸引 力 的 方案 。 
但 是 ， 由 于 环境 所 限 。 你 可 能 需要 在 缺乏 对 此 支持 的 更 老 的 浏览 器 中 运行 你 的 代码 。 因 为 
Worker 是 一 种 API 而 不 是 语法 ， 所 以 我 们 可 以 作为 扩展 来 模拟 它 。 


如 果 浏 览 器 不 支持 Worker， 那 么 从 性 能 的 角度 来 说 是 设法 模拟 多 线程 的 。 通 常 认为 Iframe 
提供 了 并 行 环境 ， 但 是 在 所 有 的 现代 浏览 器 中 ， 它 们 实际 上 都 是 和 主页 面 运行 在 同一 个 线 
程 中 的 ， 所 以 并 不 足以 模拟 并 发 。 


就 像 我 们 在 第 1 章 中 详细 讨论 的 ， We 的 异步 〈 不 是 并 行 ) 来 自 于 事件 循环 队列 ， 
所 以 可 使 用 定时 器 (setTimeout(..) 等 ) 强制 模拟 实现 异步 的 伪 Worker。 然 后 你 只 需要 提 
供 一 个 Worker API 的 封装 。Modernizr GitHub 页 面 (http://github.com/Modernizr/Modernizr/ 
wikiHTML5S-Cross-Browser-Polyfills#web-workers) 上 列 出 了 一 些 实现 ， 但 坦白 地 说 ， 它 们 
看 起 来 都 不 太 好 。 


在 这 一 点 上 上， 我 也 编写 了 一 个 模拟 Worker 的 概要 实现 (https://gist.github.com/ 
getify/1b26accbla09aa53ad25)。 它 是 很 基本 的 ,但 如 果 双 向 消息 机 制 正确 工作 ,并且 
“onerror” 处 理 函 数 也 正确 工作 ， 那 么 它 应 该 可 以 提供 简单 的 Worker 支持 。 如 果 需 要 的 
话 ， 你 也 可 以 扩展 它 ， 实 现 更 多 的 功能 ， 比 如 terminate() 或 伪 共享 Worker。 

















因为 无 法 模拟 同步 阻塞 ， 所 以 这 个 封装 不 支持 使 用 importscripts(..)。 对 
此 ， 一 个 可 能 的 选择 是 ， 解 析 并 转换 Worker 的 代码 〈 一 旦 Ajax 加 载 之 
后 ) 来 处 理 重 写 为 某 种 异步 形式 的 importscripts(..) 模拟 ， 可 能 通过 支持 
promise 的 接口 。 

















5.2 SIMD 

单 指令 多 数据 (SIMD) 是 一 种 数据 并 行 (data parallelism) 方式 ， 与 Web Worker 的 任务 
并 行 (task parallelism) 相对 ， 因 为 这 里 的 重点 实际 上 不 再 是 把 程序 逻辑 分 成 并 行 的 块 ， 而 
是 并 行 处 理 数 据 的 多 个 位 。 
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通过 SIMD， 线 程 不 再 提供 并 行 。 取 而 代 之 的 是 ， 现代 CPU 通过 数字 “向 量 ”( 特 定 类 型 
的 数组 )， 以 及 可 以 在 所 有 这 些 数 字 上 并 行 操作 的 指令 ， 来 提供 SIMD 功能 。 这 是 利用 低 
级 指令 级 并 行 的 底层 运算 。 

把 SIMD 功能 暴露 到 JavaScript 的 尝试 最 初 是 由 Intel 发 起 的 (https:/01.org/node/1495 ) ， 


具体 来 说 就 是 ，Mohammad Haghighat (在 本 书写 作 时 ) 与 Firefox 和 Chrome 团队 合作 。 
SIMD 目前 正在 进行 早期 的 标准 化 ， 很 有 机 会 进入 到 JavaScript 的 未 来 版 本 ， 比 如 ES7。 


SIMD JavaScript 计划 向 JavaScript 代码 暴露 短 向 量 类 型 和 API。 在 支持 SIMD 的 那些 系统 
中 ， 这 些 运算 将 会 直接 映射 到 等 价 的 CPU 指令 ， 而 在 非 SIMD 系统 中 就 会 退化 回 非 并 行 
化 的 运算 。 

对 于 数据 密集 型 的 应 用 〈 信 和 号 分 析 、 关 于 图 形 的 矩阵 运算 ， 等 等 )， 这 样 的 并 行 数学 处 理 
带 来 的 性 能 收益 是 非常 明显 的 ! 


在 本 书写 作 时 ， 早 期 提案 中 的 API 形式 类 似 如 下 : 








Var v1 
Var v2 


SIMD .fLoat32x4( 3.14159, 21.0, 32.3, 55.55 ); 
SIMD.float32x4( 2.1, 3.2, 4.3, 5.4 ); 


var v3 = SIMD.int32x4( 10, 101, 1001, 10001 ); 
var v4 = SIMD.int32x4( 10, 20, 30, 40 ); 


SIMD.float32x4.mul( v1, v2 ); 

// [ 6.597339, 67.2, 138.89, 299.97 ] 
SIMD.int32x4.add( v3, v4 ); 

// [ 20, 121, 1031, 10041 ] 


这 里 展示 的 是 两 个 不 同 的 向 量 数据 类 型 ，32 位 浮 点 数 和 32 位 整 型 。 可 以 看 到 ， 这 些 向 量 
大 小 恰好 就 是 四 个 32 位 元 素 ， 因 为 这 和 多 数 当 代 CPU 上 支持 的 SIMD 向 量 大 小 (128 位 ) 
匹配 。 未 来 还 有 可 能 看 到 这 些 API 的 x8 (或 更 大 ! ) 版 本 。 




















除了 muL() 和 add()， 很 多 其 他 运算 还 可 以 包含 在 内 ， 比 如 sub()、div()、abs()、neg()、 
sqrt()、reciprocal()、reciprocalSqrt() (算术 )、shuffle() (重新 安排 向 量 元 素 )、 
and()、or()、xor()、not() (逻辑 )、equal()、greaterThan()、lessThan() (比较 )、 
shiftLeft()、shiftRightLogical()、shiftRightArithmetic() ( 移 位 )、fromFloat32x4() 
以 及 fromInt32x4() (转换 )。 





对 于 可 用 的 SIMD 功能 (http://github.com/johnmccutchan/ecmascript_simd)， 
有 一 个 官方 的 (有 希望 的 、 值 得 期 待 的 、 面 向 未 来 的 ) prolyfill， 它 展示 了 比 
我 们 这 一 节 中 多 得 多 的 计划 好 的 SIMD 功能 。 





5.3 asm.js 


asm.js (http://asmjs.org) 这 个 标签 是 指 JavaScript 语言 中 可 以 高 度 优化 的 一 个 子 集 。 通 过 
小 心 避免 某 些 难 以 优化 的 机 制 和 模式 〈 垃 圾 收集 、 类 型 强制 转换 ， 等 等 ) ，asm.js 风格 的 代 
码 可 以 被 JavaScript 引擎 识别 并 进行 特别 激进 的 底层 优化 。 














和 本 章 前 面 讨 论 的 其 他 程序 性 能 机 制 不 同 ，asm.js 并 不 是 JavaScript 语言 规范 需要 采纳 的 
某 种 东西 。 虽 然 asm.js 规范 的 确 存在 (http://asmjs,org/spec/latest/)， 但 它 主要 是 用 来 追踪 
一 系列 达成 一 致 的 备 选 优 化 方案 而 不 是 对 JavaScript 引擎 的 一 组 要 求 。 





目前 还 没有 提出 任何 新 的 语法 。 事 实 上 ，asm.js 提出 了 一 些 识别 满足 asm.js 规则 的 现存 标 
准 JavaScript 语法 的 方法 ， 并 让 引擎 据 此 实现 它们 自己 的 优化 。 





浏览 器 提供 者 之 间 在 关于 程序 中 应 如 何 激活 asm.js 这 一 点 上 有 过 一 些 分 歧 。 早 期 版 本 
的 asm.js 实验 需要 一 个 "use asm"; pragma (类 似 于 严格 模式 的 "use strict";) 帮助 提醒 
JavaScript 引擎 寻找 asm.js 优化 机 会 。 另 外 一 些 人 认为 ，asm.js 应 该 就 是 一 个 启发 式 的 集 
合 ， 引 擎 应 该 能 够 自动 识别 ， 无 需 开 发 者 做 任何 额外 的 事情 。 这 意味 着 ， 从 理论 上 说 ， 现 
有 的 程序 可 以 从 asm.js 风格 的 优化 得 益 而 无 需 特意 做 什么 。 











5.3.1 如 何 使 用 asm.js 优化 

关于 asm.js 优化 ， 首 先 要 理解 的 是 类 型 和 强制 类 型 转换 (参见 本 书 的 “类 型 和 语法 ”部 
分 )。 如 果 JavaScript 引擎 需要 跟踪 一 个 变量 在 各 种 各 样 的 运算 之 间 的 多 个 不 同类 型 的 值 ， 
才能 按 需 处 理 类 型 之 间 的 强制 类 型 转换 ， 那 么 这 大 量 的 额外 工作 会 使 得 程序 优化 无 法 达到 
最 优 。 





























为 了 解释 明了 ， 我 们 在 这 里 将 使 用 asm.js 风格 代码 ， 但 你 要 清楚 ， 通 常 
并 不 需要 手工 编写 这 样 的 代码 。asm.js 通常 是 其 他 工具 的 编译 目标 ， 比 如 
Emscripten (https://github.com/kripken/emscripten/wiki)。 当 然 ， 你 也 可 以 自 
己 编写 asm.js 代码 ， 但 一 般 来 说 ， 这 想法 并 不 好 ， 因 为 这 是 非常 耗 时 且 容 
易 出 错 的 过 程 。 尽 管 如 此 ， 可 能 还 是 会 有 一 些 情况 需要 你 修改 代码 ， 以 便于 
asm.js 优化 。 
























































还 有 一 些 技巧 可 以 用 来 向 支持 asm.js 的 JavaScript 引擎 暗示 变量 和 运算 想 要 的 类 型 是 什么 ， 
使 它 可 以 省 略 这 些 类 型 转换 跟踪 步骤 。 


比如 : 
var a = 42; 


//.. 








var b = a; 


在 这 个 程序 中 ， 赋 值 b = a 留 下 了 变量 类 型 二 义 性 的 后 门 。 但 它 也 可 以 换 一 种 方式 ， 写 成 


这 样 : 





// .， 

varb=a|0; 
此 处 我 们 使 用 了 与 6 的 | (二 进 制 或 ) 运算 ， 除 了 确保 这 个 值 是 32 位 整 型 之 外 ， 对 于 值 没 
有 任何 效果 。 这 样 的 代码 在 一 般 的 JavaScript 引擎 上 都 可 以 正常 工作 。 而 对 支持 asm.js 的 
JavaScript 引擎 来 说 ， 这 段 代 码 就 发 出 这 样 的 信号 ，b 应 该 总 是 被 当 作 32 位 整 型 来 处 理 ， 
这 样 就 可 以 省 略 强制 类 型 转换 追踪 。 


类 似 地 ， 可 以 这 样 把 两 个 变量 的 加 运算 限制 为 更 高 效 的 整 型 加 运算 〈 而 不 是 浮 点 型 ) : 
































(a+b) |0 





另 一 方面 ， 支 持 asm.js 的 JavaScript 引擎 可 以 看 到 这 个 提示 并 推导 出 这 里 的 + 运算 应 该 是 
32 位 整 型 如， 因为 不 管 怎 样 ， 整 个 表达 式 的 结果 都 会 自动 规范 为 32 位 整 型 。 














5.3.2 asm.js 模块 

对 JavaScript 性 能 影响 最 大 的 因素 是 内 存 分 配 、 垃 圾 收集 和 作用 域 访问 。asm.js 对 这 些 问 
题 提出 的 一 个 解决 方案 就 是 ， 声 明 一 个 更 正式 的 asm.js“ 模 块 "， 不 要 和 ES6 模块 混 消 。 
请 参考 本 系列 《你 不 知道 的 JavaScript (下 卷 )》 的 “ES6 & Beyond” 部 分 。 


对 一 个 asm.js 模块 来 说 ， 你 需要 明确 地 导入 一 个 严格 规范 的 命名 空间 一 一 规范 将 之 称 世 
stdlibp， 因 为 它 应 该 代表 所 需 的 标准 库 一 一 以 导入 必要 的 符号 ， 而 不 是 通过 词法 作用 域 使 
用 全 局 的 那些 符号 。 基 本 上 ，window 对 象 就 是 一 个 asm.js 模块 可 以 接受 的 stdlib 对 象 ， 
但 是 ， 你 能 够 而 且 可 能 也 需要 构造 一 个 更 加 严格 的 。 


你 还 需要 声明 一 个 堆 (heap) 并 将 其 传 入 。 这 个 术语 用 于 表示 内 存 中 一 块 保留 的 位 置 ， 变 
量 可 以 直接 使 用 而 不 需要 额外 的 内 存 请 求 或 释放 之 前 使 用 的 内 存 。 这 样 ，asm.js 模块 就 不 
需要 任何 可 能 导致 内 存 扰动 的 动作 了 ， 只 需 使 用 预先 保留 的 空间 即 可 。 























一 个 堆 就 像 是 一 个 带 类 型 的 ArrayBuffer， 比 如 : 


var heap = new ArrayBuffer( 0x10000 ); // 64k 推 











由 于 使 用 这 个 预 留 的 64k 二 进 制 空间 ，asm.js 模块 可 以 在 这 个 缓冲 区 存储 和 获取 值 ， 不 需 
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要 付出 任何 内 存 分 配 和 垃圾 收集 的 代价 。 举 例 来 说 ， 可 以 在 模块 内 部 使 用 堆 缓冲 区 备份 一 
个 64 位 浮 点 值 数组 ， 就 像 这 样 : 




















var arr = new Float64Array( heap ); 








用 一 个 简单 快捷 的 asm.js 风格 模块 例子 来 展示 这 些 细节 是 如 何 结合 到 一 起 的 。 我 们 定义 了 
一 个 foo(..)。 它 接收 一 个 起 始 值 (x) 和 终止 值 (y) 整数 构成 一 个 范围 ， 并 计算 这 个 范 
围 内 的 值 的 所 有 相 邻 数 的 乘积 ， 然 后 算出 这 些 值 的 平均 数 : 


























function fooASM(stdlib,foreign,heap) { 
"Use asm"; 


var arr = new stdLib.Int32Array( heap ); 


function foo(x,y) { 


x=x | 0; 
y=y1|®9; 
var i = 0; 
var p = 0; 


var sum = 0; 
var count = ((y|0) - (x|0)) | 0; 


// 计算 所 有 的 内 部 相 邻 数 乘积 
for (人 =Xx | 0; 
(i | 0)< (y | 0); 
p=(p+8)|0,i=(i+1)|0 
) { 
// 存储 结果 
arr[ p>>3]= (i* (i+ 1)) | 0; 
} 


// 计算 所 有 中 间 值 的 平均 数 
for (is 0 三-9， 
(i | 0) < (count | 0); 
p=(p+8)|0,i=(i+1)|0 
二 


sum = (sum + arr[ p >> 3 ]) | 0; 
} 





return +(sum / count); 


} 


return { 
foo: foo 
}; 
} 


var heap = new ArrayBuffer( 0x1000 ); 
var foo = fooASM( window, null, heap ) .foo; 


foo( 10, 20 ); // 233 
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出 于 展示 的 目的 ， 这 个 asm.js 例子 是 手写 的 ， 所 以 它 并 不 能 代表 由 目标 为 
asm.js 的 编译 工具 产生 的 同样 功能 的 代码 。 但 是 ， 它 确实 显示 了 asm.js 代码 
的 典型 特性 ， 特 别 是 类 型 提示 以 及 堆 缓冲 区 在 存储 临时 变量 上 的 使 用 。 


















































第 一 个 对 fooASM(..) 的 调用 建立 了 带 堆 分 配 的 asm.js 模块 。 结 果 是 一 个 foo(..) 函数 ,我 
门 可 以 按照 需要 调用 任意 多 次 。 这 些 foo(..) 调用 应 该 被 支持 asm.js 的 JavaScript 引擎 专 
门 优化 。 很 重要 的 一 点 是 ， 前 面 的 代码 完全 是 标准 JavaScript， 在 非 asm.js 引擎 中 也 能 正 
常 工作 (没有 特殊 优化 )。 


显然 ， 使 asm.js 代码 如 此 高 度 可 优化 的 那些 限制 的 特性 显著 降低 了 这 类 代码 的 使 用 范 
asm.js 并 不 是 对 任意 程序 都 适用 的 通用 优化 手段 。 它 的 目标 是 对 特定 的 任务 处 理 提 供 一 种 
优化 方法 ， 比 如 数学 运算 (如 游戏 中 的 图 形 处 理 )。 
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5.4 小结 

本 部 分 的 前 四 章 都 是 基于 这 样 一 个 前 提 : 异步 编码 模式 使 我 们 能 够 编写 更 高 效 的 代码 ， 通 
常 能 够 带 来 非常 大 的 改进 。 但 是 ， 异 步 特性 只 能 让 你 走 这 么 远 ， 因 为 它 本 质 上 还 是 绑 定 在 
一 个 单 事件 循环 线程 上 。 

因此 ， 在 这 一 章 里 ， 我 们 介绍 了 几 种 能 够 进一步 提高 性 能 的 程序 级 别 的 机 制 。 

Web Worker 让 你 可 以 在 独立 的 线程 运行 一 个 JavaScript 文件 〈 即 程序 ) ， 使 用 异步 事件 在 
线程 之 间 传 递 消 息 。 它 们 非常 适用 于 把 长 时 间 的 或 资源 密集 型 的 任务 卸载 到 不 同 的 线程 
中 ， 以 提高 主 UI 线程 的 响应 性 。 

















SIMD 打算 把 CPU 级 的 并 行 数学 运算 映射 到 JavaScript API， 以 获得 高 性 能 的 数据 并 行 运 
算 ， 比 如 在 大 数据 集 上 的 数字 处 理 。 


最 后 ，asm.js 描述 了 JavaScript 的 一 个 很 小 的 子 集 ， 它 避免 了 JavaScript 难以 优化 的 部 分 
(比如 垃圾 收集 和 强制 类 型 转换 ) ， 并 且 让 JavaScript 引擎 识别 并 通过 激进 的 优化 运行 这 样 
的 代码 。 可 以 手工 编写 asm.js， 但 是 会 极端 费力 且 容 易 出 错 ， 类 似 于 手写 汇编 语言 (这 
是 其 名 字 的 由 来 )。 实 际 上 ，asmjs 也 是 高 度 优化 的 程序 语言 交叉 编译 的 一 个 很 好 的 目标 ， 
比如 Emscripten 把 C/C++ 转换 成 JavaScript (https:Wgithub.comy/kripken/emscripten/wiki) 。 























JavaScript 还 有 一 些 更 加 激进 的 思路 已 经 进入 非常 早期 的 讨论 ， 尽 管 本 章 并 没有 明确 包含 
这 些 内 容 ， 比 如 近似 的 直接 多 线程 功能 (而 不 是 藏 在 数据 结构 API 后 面 )。 不 管 这 些 最 终 
会 不 会 实现 ， 还 是 我 们 将 只 能 看 到 更 多 的 并 行 特性 偷偷 加 入 JavaScript， 但 确实 可 以 预见 ， 
未 来 JavaScript 在 程序 级 别 将 获得 更 加 优化 的 性 能 。 
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性 能 测试 与 调 优 





本 部 分 的 前 四 章 都 是 关于 (异步 与 并 发 ) 编码 模式 的 性 能 ， 第 5 章 是 关于 宏观 程序 架构 级 
的 性 能 。 这 一 章 要 讨论 的 主题 则 是 微观 性 能 ， 关 注 点 在 单个 表达 式 和 语句 。 

最 能 引发 普遍 好 奇 心 的 领域 之 一 ( 真 的 ， 有 些 开 发 者 可 能 会 沉迷 于 此 ) 就 是 分 析 和 测试 编 
写 一 行 或 一 块 代码 的 多 个 选择 ， 然 后 确定 哪 一 种 更 快 。 

我 们 将 要 来 探讨 这 些 问 题 中 的 一 部 分 ， 但 从 一 开始 你 就 要 明白 ， 本 章 的 目的 不 是 为 了 满足 
对 微观 性 能 调 优 的 沉迷 ， 比 如 某 个 JavaScript 引擎 上 运行 +t+a 是 不 是 会 比 at+ 快 。 本 章 更 
重要 的 目标 古 弄 清楚 哪些 种 类 的 JavaScript 性 能 更 重要 ， 哪 些 种 类 则 无 关 紧 要 ， 以 及 如 何 
区 分 。 

且 是 ， 在 得 出 结论 之 前 ， 首 先 需 要 探讨 如 何 最 精确 可 靠 地 测试 JavaScript 性 能 ， 因 为 我 们 
的 知识 库 中 充满 了 大 量 的 误解 和 迷 思 。 需 要 筛选 掉 所 有 垃圾 以 得 到 清晰 的 概念 。 


cb :站 中 十 
6.1 性 能 测试 
好 ， 现 在 是 时 候 消除 一 些 误解 了 。 我 敢 打赌 ， 如 果 被 问 到 如 何 测试 某 个 运算 的 速度 (执行 
时 间 )， 绝 大 多 数 Javaseript 开发 者 都 会 从 类 似 下 面 的 代码 开始 : 
























































var start = (new Date()).getTime(); // 或 者 Date.now() 
// 进行 一 些 操作 
var end = (new Date()).getTime(); 


console.log( "Duration:", (end - start) ); 
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如 果 这 大 致 上 就 是 你 首先 想到 的 ， 请 举 手 。 嗯 ， 我 想 就 是 如 此 。 这 种 方案 有 很 多 错误 ， 不 
过 别 难 过 ， 我 们 会 找到 正确 方法 的 。 








这 个 测量 方式 到 底 能 告诉 你 什么 呢 ? 理解 它 做 了 什么 以 及 关于 这 个 运算 的 执行 时 间 不 能 提 
供 哪些 信息 ， 就 是 学 习 如 何 正 确 测试 JavaScript 性 能 的 关键 所 在 。 

















如 果 报 告 的 时 间 是 6， 可 能 你 会 认为 它 的 执行 时 间 小 于 lms。 但 是 ， 这 并 不 十 分 精确 。 
些 平台 的 精度 并 没有 达到 lms， 而 是 以 更 大 的 递增 间隔 更 新 定时 器 。 比 如 ，Windows ( 
就 是 正 ) 的 早期 版 本 上 的 精度 只 有 15ms， 这 就 意味 着 这 个 运算 的 运行 时 间 至 少 需要 这 
长 才 不 会 被 报告 为 6 ! 


入 诡计 


还 有 ， 不 管 报告 的 时 长 是 多 少 ， 你 能 知道 的 唯一 一 点 就 是 ， 这 个 运算 的 这 次 特定 的 运行 消 
耗 了 大 概 这 么 长 时 间 。 而 它 是 不 是 总 是 以 这 样 的 速度 运行 ， 你 基本 上 一 无 所 知 。 你 不 知道 
引擎 或 系统 在 这 个 时 候 有 没有 受到 什么 影响 ， 以 及 其 他 时 候 这 个 运算 会 不 会 运行 得 更 快 。 


如 有 果 时 长 报告 是 4 呢 ? 你 能 更 加 确定 它 的 运行 需要 大 概 4ms 吗 ? 不 能 。 它 消耗 的 时 间 可 能 
要 短 一 些 ， 而 且 在 获得 start 或 end 时 间 惟 之 间 也 可 能 有 其 他 一 些 延误 。 




















更 麻烦 的 是 ， 你 也 不 知道 这 个 运算 测试 的 环境 是 否 过 度 优 化 了 。 有 可 能 JavaScript 引擎 找 
到 了 什么 方法 来 优化 你 这 个 独立 的 测试 用 例 ， 但 在 更 真实 的 程序 中 是 无 法 进行 这 样 的 优化 
的 ， 那 么 这 个 运算 就 会 比 测试 时 跑 得 慢 。 











那么 ， 能 知道 的 是 什么 呢 ? 很 遗憾 ， 根 据 前 面 提 出 的 内 容 ， 我 们 几乎 一 无 所 知 。 这 样 低 置 
信和 度 的 测试 几乎 无 力 支持 你 的 任何 决策 。 这 个 性 能 测试 基本 上 是 无 用 的 。 更 坏 的 是 ， 它 是 
危险 的 ， 因 为 它 可 能 提供 了 错误 的 置信 度 ， 不 仅 是 对 你 ， 还 有 那些 没有 深入 思 孝 带 来 测试 
结果 的 条 件 的 人 员 。 


6.1.1 重复 

“好 吧 ,” 你 现在 会 说 ,“ 那 就 用 一 个 循环 把 它 包 起 来 ， 这 样 整个 测试 的 运行 时 间 就 会 更 长 
一 些 了 。.” 如 果 重 复 一 个 运算 100 次 ， 然 后 整个 循环 报告 共 消 耗 了 137ms， 那 你 就 可 以 把 
它 除 以 100， 得 到 每 次 运算 的 平均 用 时 为 1.37ms， 是 这 样 吗 ? 

并 不 完全 是 这 样 。 

简单 的 数学 平均 值 绝 对 不 足以 对 你 要 外 推 到 整个 应 用 范围 的 性 能 作出 判断 。 迭 代 100 次 ， 
即使 只 有 几 个 (过 高 或 过 低 的 ) 的 异常 值 也 可 以 影响 整个 平均 值 ， 然 后 在 重复 应 用 这 个 结 
论 的 时 候 ， 你 还 会 扩散 这 个 误差 ， 产生 更 大 的 欺骗 性 。 

你 也 可 以 不 以 固定 次 数 执行 运算 ， 转 而 循环 运行 测试 ， 直 到 达到 某 个 固定 的 时 间 。 这 可 能 
会 更 可 靠 一 些 ， 但 如 何 确定 要 执行 多 长 时 间 呢 ? 你 可 能 会 猜测 ， 执 行 时 间 应 该 是 你 的 运算 
执行 的 单 次 时 长 的 若干 倍 。 错 。 
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实际 上 ， 重 复 执行 的 时 间 长 度 应 该 根据 使 用 的 定时 器 的 精度 而 定 ， 专 门 用 来 最 小 化 不 精确 
性 。 定 时 器 的 精度 越 低 ， 你 需要 运行 的 时 间 就 越 长， 这 样 才能 确保 错误 率 最 小 化 。15ms 的 
定时 器 对 于 精确 的 性 能 测试 来 说 是 非常 差劲 的 。 要 最 小 化 它 的 不 确定 性 (也 就 是 出 错 率 ) 
到 小 于 1%， 需 要 把 你 的 每 轮 测 试 运 代 运行 750ms。 而 lms 定时 器 时 只 需要 每 轮 运行 50ms 
就 可 以 达到 同样 的 置信 度 。 


但 是 ， 这 只 是 单独 的 一 个 例子 。 要 确保 把 异常 因素 排除 ， 你 需要 大 量 的 样本 来 平均 化 。 你 
还 会 想 要 知道 最 差 样 本 有 多 慢 ， 最 好 的 样本 有 多 快 ， 以 及 最 好 和 最 差 情 况 之 间 的 偏离 度 有 
多 大 ， 等 等 。 你 需要 知道 的 不 仅仅 是 一 个 告诉 你 某 个 东西 跑 得 有 多 快 的 数字 ， 还 需要 得 到 
某 个 可 以 计量 的 测量 值 告诉 你 这 个 数字 的 可 信和 度 有 多 高 。 


还 有 ， 你 可 能 会 想 要 把 不 同 的 技术 (以 及 其 他 方面 ) 组 合 起 来 ， 以 得 到 所 有 可 能 方法 的 最 
佳 平衡 。 

这 仅仅 是 个 开始 。 如 果 你 过 去 进行 性 能 测试 的 方法 比 我 刚才 提出 的 还 要 不 正式 的 话 ， 好 
吧 ， 那 么 可 以 说 你 完全 不 知道 : 正确 的 性 能 测试 。 



































6.1.2 Benchmark.js 

任何 有 意义 且 可 靠 的 性 能 测试 都 应 该 基于 统计 学 上 合理 的 实践 。 此 处 并 不 打算 撰写 一 章 关 
于 统计 学 的 内 容 ， 所 以 我 要 和 如 下 术语 挥手 作 别 : 标准 差 、 方 差 、 误 差 幅 度 。 如 果 你 不 知 
道 这 些 术 语 的 意思 一 一 我 回 大 学 上 了 一 门 统计 学 课程 ， 但 对 这 些 还 是 有 点 糊涂 一 一 那么 实 
际 上 你 还 不 够 资格 编写 自己 的 性 能 测试 逻辑 。 





幸运 的 是 ， 像 John-David Dalton 和 Mathias Bynens 这 样 的 聪明 人 了 解 这 些 概念 ， 并 编写 了 
一 个 统计 学 上 有 效 的 性 能 测试 工具 ， 名 为 Benchmark.js (http://benchmarkjs.com/)。 因 此 ， 
对 于 这 个 悬而未决 的 问题 ， 我 的 答案 就 是 :“ 使 用 这 个 工具 就 好 了 。 


我 并 不 打算 复述 他 们 的 整个 文档 来 介绍 Benchmarkjs 如 何 运 作 。 他 们 的 API 很 不 错 ， 你 
应 该 读 一 读 。 还 有 一 些 很 棒 的 文章 介绍 了 更 多 的 细节 和 方法 ， 比 如 这 里 (http://calendar. 
perfplanet.com/2010/bulletproof-javascript-benchmarks) 和 这 里 (http://monsur.hosa.in/2012/12/11/ 
benchmarksjs.html ) 。 




















但 为 了 简单 展示 一 下 ， 下 面 介绍 应 该 如 何 使 用 Benchmark.js 来 运行 一 个 快速 的 性 能 测试 : 








function foo() { 
// 要 测试 的 运算 


} 
var bench = new Benchmark( 
"foo test", // 测试 名 称 
foo, // 要 测试 的 函数 (也 即 内 容 ) 
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J // 可 选 的 额外 选项 (参见 文档 ) 
} 
3 
bench.hz; // 每 秒 运算 数 
bench. stats.moe; // 出 错 边 界 
bench. stats.variance; // 样本 方差 





//.. 


除了 这 里 我 们 介绍 的 一 点 内 容 ， 关 于 Benchmark.js 的 使 用 还 有 很 多 要 学 的 。 但 是 ， 关 键 在 
于 它 处 理 了 为 给 定 的 一 段 JavaScript 代码 建立 公平 、 可 靠 、 有 效 的 性 能 测试 的 所 有 复杂 性 。 








如 果 你 想 要 对 你 的 代码 进行 功能 测试 和 性 能 测试 ， 这 个 库 应 该 最 优先 考虑 。 


这 里 我 们 展示 了 测试 一 个 像 X 这 样 的 单个 运算 的 使 用 方法 ， 不 过 很 可 能 你 还 想 要 比较 X 


和 YY。 通过 在 一 个 suite (Benchmark.js 组 织 特性 ) 中 建立 两 个 不 同 的 测试 很 容易 做 到 





点 。 然 后 ， 可 以 依次 运行 它们 ， 比 较 统 计 结果 ， 得 出 结论 ， 判 断 X 和 YY 哪个 更 快 。 


Benchmark.js 当然 可 以 用 在 浏览 器 中 测试 JavaScript (参见 6.3 节 )， 它 也 可 以 在 非 汶 
环境 中 运行 (Nodejs 等 )。 





Benchmark.js 有 一 个 很 大 程度 上 还 未 开发 的 潜在 用 例 ， 就 是 你 可 以 将 其 用 于 开发 或 讽 








这 一 


大 


览 喜 


试 环 


境 中 ， 针 对 应 用 中 JavaScript 的 关键 路 径 部 分 运行 自动 性 能 回归 测试 。 这 和 你 可 能 在 部 署 
之 前 运行 的 单元 测试 套件 类 似 ， 你 也 可 以 与 之 前 的 版 本 进行 性 能 测试 比较 ， 以 监控 应 用 性 











能 是 提高 了 还 是 降低 了 。 


setup/teardown 


在 前 面 的 代码 片段 中 ， 我 们 忽略 了 “额外 选项 ”{ .. } 对 象 。 这 里 有 两 个 选项 是 我 们 应 该 





讨论 的 : setup 和 teardown。 





这 两 个 选项 使 你 可 以 定义 在 每 个 测试 之 前 和 之 后 调用 的 函数 。 


有 一 点 非常 重要 ， 一 定 要 理解 ，setup 和 teardown 代码 不 会 在 每 个 测试 迭代 都 运行 。 

















最 好 





的 理解 方法 是 ， 想 像 有 一 个 外 层 循环 〈 一 轮 一 轮 循环 ) 还 有 一 个 内 层 循环 (一 个 测试 








个 


测试 循环 )。setup 和 teardown 在 每 次 外 层 循环 〈 轮 ) 的 开始 和 结束 处 运行 ， 而 不 是 在 内 





层 循环 中 。 





+ MW; 
.CharAt( 1 ); 


中 外 
DO 


然后 ， 你 建立 了 测试 setup 如 下 : 


var a = "x"; 





你 的 目的 可 能 是 确保 每 个 测试 迭代 开始 的 a 值 都 是 "x"。 但 并 不 是 这 样 ! 只 有 在 每 一 轮 测 
试 开 始 时 a 值 为 "x"， 然 后 重复 + "w" 链接 运算 会 使 得 a 值 越 来 越 长 ， 即 使 你 只 是 访问 了 位 
置 1 处 的 字符 "w"。 

对 革 个 东西 ， 比 如 DOM， 执 行 产生 副作用 的 操作 的 时 候 ， 比 如 附加 一 个 子 元 素 ， 常 常会 
刺 伤 你 。 你 可 能 认为 你 的 父 元 素 每 次 都 清空 了 ， 但 是 ， 实 际 上 它 被 附加 了 很 多 元 素 ， 这 可 
能 会 严重 影响 测试 结果 。 



































6.2 ”环境 为 王 


对 特定 的 性 能 测试 来 说 ， 不 要 忘 了 检查 测试 环境 ， 特 别 是 比较 任务 X 和 YY 这样 的 比 对 测 
试 。 仅 仅 因为 你 的 测试 显示 X 比 Y 快 ， 并 不 能 说 明 结 论 X 比 Y 快 就 有 实际 的 意义 。 











举例 来 说 ， 假 定 你 的 性 能 测试 表明 X 运算 每 秒 可 以 运行 10 000 000 次 ， 而 Y 每 秒 运行 
8 000 000 次 。 你 可 以 说 Y 比 X 慢 了 20%。 数 学 上 这 是 正确 的 ， 但 这 个 断言 并 不 像 你 想 
象 的 那么 有 意义 。 


让 我 们 更 认真 地 思考 这 个 结果 : 每 秒 10 000 000 次 运算 就 是 每 毫秒 10 000 次 运算 ， 每 微妙 
10 次 。 换 句 话 说， 单 次 运算 需要 0.1hs， 也 就 是 100ns。 很 难 理解 100ns 到 底 有 多 么 短 。 作 
为 对 比 ， 据 说 人 类 的 眼睛 通常 无 法 分 辨 100ms 以 下 的 事件 ， 这 要 比 X 运算 速度 的 100ns 慢 
一 百 万 倍 了 。 



































即使 最 近 的 科学 研究 表明 可 能 大 脑 可 以 处 理 的 最 快速 度 是 13ms (大 约 是 以 前 结论 的 8 倍 )， 
这 意味 着 X 的 运算 速度 仍然 是 人 类 大 脑 捕 获 一 个 独立 的 事件 发 生 速度 的 125 000 倍 。X 真 
的 非常 非常 快 。 





不 过 更 重要 的 是 ， 我 们 来 讨论 一 下 X 和 立 的 区 别 ， 即 每 秒 2 000 000 次 运算 差距 的 区 别 。 
如 果 X 需要 100ns， 而 了 需要 80ns， 那 么 差别 就 是 20ns， 这 在 最 好 情况 下 也 只 是 人 类 大 脑 
所 能 感知 到 的 最 小 间隙 的 65 万 分 之 一 。 











我 要 说 的 是 什么 呢 ? 这 些 性 能 差别 无 所 谓 ， 完 全 无 所 谓 ! 
但 是 稍 等 ， 如 果 这 些 运算 将 要 连续 运行 很 多 次 呢 ? 那么 这 个 差别 就 会 累加 起 来 ， 对 不 对 ? 


好 吧 ， 那 我 们 要 问 的 就 是 ， 这 个 运算 XX 要 一 个 接 一 个 地 反复 运行 多 次 的 可 能 性 有 多 大 呢 ， 
得 运行 650 000 次 才能 有 一 点 希望 让 人 类 感知 到 。 更 可 能 的 情况 是 ， 它 得 在 一 个 紧密 循环 
里 运行 5000 000~10 000 000 次 才 有 意义 。 





你 脑子 里 的 计算 机 科学 家 可 能 抗议 说 ， 这 是 可 能 的 ， 但 你 脑子 里 那个 现实 的 的 你 会 更 大 声 
说 还 是 应 该 检查 一 下 这 个 可 能 性 到 底 有 多 大 。 即 使 在 很 少见 的 情况 下 是 有 意义 的 ， 但 在 绝 
大 数 情况 下 它 却 是 无 关 紧 要 的 。 
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对 于 微小 运算 的 绝 大 多 数 测 试 结果 ， 比 如 ++x 对 比 x++ 的 迷 思 ， 像 出 于 性 能 考虑 应 该 用 X 
代替 YY 这 样 的 结论 都 是 不 成 立 的 。 


引擎 优化 
你 无 法 可 靠 地 推断 ， 如 果 在 你 的 独立 测试 中 X 比 Y 要 快 上 10hs， 就 意味 着 XX 总 是 比 Y 要 
快 ， 就 应 该 总 是 使 用 X。 性 能 并 不 是 这 样 发 挥 效力 的 。 它 要 比 这 复杂 得 多 。 

















举例 来 说 ， 设 想 一 下 (纯粹 假设 ) 你 对 某 些 微观 性 能 行为 进行 了 测试 ， 比 如 这 样 的 比较 ; 





var twelve = "12"; 
var foo = "foo"; 
// 测试 1 


var X1 = parseInt( twelve ); 
var X2 = parseInt( foo ); 


// 测试 2 
var Y1 = Number( twelve ); 
var Y2 = Number( foo ); 


如 果 理 解 与 Number(..) 相 比 parseInt(..) 做 了 些 什么 ,你 可 能 会 凭 直觉 以 为 parseInt(..) 
做 的 工作 可 能 更 多 ， 特 别 是 在 foo 用 例 下 。 或 者 你 可 能 会 直觉 认为 它们 的 工作 量 在 foo 用 
例 下 应 该 相同 ， 两 个 都 应 该 能 够 在 第 一 个 字符 f 处 停止 。 





哪 种 直觉 是 正确 的 呢 ? 老实 说 ， 我 不 知道 。 不 过 ， 对 于 我 举 的 这 个 例子 ， 哪 个 判断 正确 并 
不 重要 。 测 试 结 果 可 能 是 什么 ?这 里 我 再 次 单纯 假设 ， 并 没有 实际 进行 过 测试 ， 也 没 必 要 
那么 做 。 




















让 我 们 假装 测试 结果 返回 的 是 从 统计 上 来 说 完全 相同 的 X 和 站。 那么 你 能 够 确定 你 关于 ff 
字符 的 直觉 判断 是 否 正确 吗 ? 不 能 。 











在 我 们 假设 的 情况 下 ， 引 擎 可 能 会 识别 出 变量 twelve 和 foo 在 每 个 测试 中 只 被 使 用 了 一 
次 ， 因 此 它 可 能 会 决定 把 这 些 值 在 线 化 。 那 么 它 就 能 识别 出 Number( "12”) 可 以 直接 替换 
为 12。 对 于 parseInt(..)， 它 可 能 会 得 出 同样 的 结论 ， 也 可 能 不 会 。 




















也 有 可 能 引擎 的 死 代码 启发 式 去 除 算法 可 能 会 参与 进来 ， 它 可 能 意识 到 变量 X 和 YY 并 没 
有 被 使 用 ， 因 此 将 其 标识 为 无 关 紧 要 的 ， 故 而 在 整个 测试 中 实际 上 什么 事情 都 没有 做 。 











所 有 这 些 都 只 是 根据 单个 测试 所 做 的 假设 的 思路 。 现 代 引擎 要 比 我 们 赁 直觉 进行 的 推导 复 
杂 得 多 。 它 们 会 实现 各 种 技巧 ， 比 如 跟踪 记录 代码 在 一 小 段 时 期 内 或 针对 特别 有 限 的 输入 
集 的 行为 。 


如 有 果 引 擎 由 于 固定 输入 进行 了 某 种 优化 ， 而 在 真实 程序 中 的 输入 更 加 多 样 化 ， 对 优化 决策 
影响 很 大 〈 项 至 完全 没有 ) 呢 ? 或 者 如 果 引 擎 看 到 测试 由 性 能 工具 运行 了 数 万 次 而 进行 优 
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化 ， 但 是 在 真实 程序 中 只 会 运行 数 百 次 ， 而 这 种 情况 下 引擎 认 为 完全 不 值得 优化 呢 ? 


我 们 设想 的 所 有 这 些 优化 可 能 性 在 受 限 的 测试 中 都 有 可 能 发 生 ， 而 且 在 更 复杂 的 程序 中 
(出 于 各 种 各 样 的 原因 )， 引 擎 可 能 不 会 进行 这 样 的 优化 。 也 可 能 恰恰 相反 ， 引 擎 可 能 不 
会 优化 这 样 无 关 紧 要 的 代码 ， 但 是 在 系统 已 经 在 运行 更 复杂 的 程序 时 可 能 会 倾向 于 激进 
的 优化 。 


这 里 我 要 说 明 的 就 是 ， 你 真 的 不 能 精确 知道 底下 到 底 发 生 了 什么 。 你 能 进行 的 所 有 猜想 和 
假设 对 于 这 样 的 决策 不 会 有 任何 实际 的 影响 。 

















这 是 不 是 意味 着 无 法 真正 进行 任何 有 用 的 测试 呢 ? 绝对 不 是 ! 








这 可 以 归结 为 一 点 ， 测 试 不 真实 的 代码 只 能 得 出 不 真实 的 结论 。 如 果 有 实际 可 能 的 话 ， 你 
应 该 测试 实际 的 而 非 无 关 紧要 的 代码 ， 测 试 条 件 与 你 期 望 的 真实 情况 越 接近 越 好 。 只 有 这 
样 得 出 的 结果 才 有 可 能 接近 事实 。 








像 ++x 对 比 x++ 这 样 的 微观 性 能 测试 结果 为 虚假 的 可 能 性 相当 高 ， 可 能 我 们 最 好 就 假定 它 
们 是 假 的 。 





6.3 jsPerf.com 


尽管 在 所 有 的 JavaScript 运行 环境 下 ，Benchmark.js 都 可 用 于 测试 代码 的 性 能 ， 但 有 一 点 
一 定 要 强调 ， 如 果 你 想 要 得 到 可 靠 的 测试 结论 的 话 ， 就 需要 在 很 多 不 同 的 环境 (桌面 浏览 
器 、 移 动 设 备 ， 等 等 ) 中 测试 汇集 测试 结果 。 


比如 ， 针 对 同样 的 测试 高 端 桌面 机 器 的 性 能 很 可 能 和 智能 手机 上 Chrome 移动 设备 完全 不 
同 。 而 电量 充足 的 智能 手机 上 的 结果 可 能 也 和 同一 个 智能 手机 但 电量 只 有 2% 时 完全 不 同 ， 
因为 这 时 候 设 备 将 会 开始 关闭 无 线 模块 和 处 理 器 。 


如 果 想 要 在 不 止 一 个 环境 下 得 出 像 “X 比 Y 快 ”这 样 的 有 意义 的 结论 成 立 ， 那 你 需要 在 尽 
可 能 多 的 真实 环境 下 进行 实际 测试 。 仅 仅 因为 在 Chrome 上 某 个 X 运算 比 Y 快 并 不 意味 着 
这 在 所 有 的 浏览 器 中 都 成 立 。 当 然 你 可 能 还 想 要 交叉 引用 多 个 浏 览 妖 上 的 测试 运行 结果 ， 
并 有 用 户 的 图 形 展示 。 













































































有 一 个 很 棒 的 网 站 正 是 因 这 样 的 需求 而 诞生 的 ， 名 为 jsPerf (http:Wjsperf.com)。 它 使 用 我 
们 前 面 介绍 的 Benchmark.js 库 来 运行 统计 上 精确 可 靠 的 测试 ， 并 把 测试 结果 放 在 一 个 公开 
可 得 的 URL 上 ， 你 可 以 把 这 个 URL 转发 给 别人 。 


每 次 测试 运行 的 时 候 ， 测 试 结果 就 会 被 收集 并 持久 化 ， 累 积 的 测试 结果 会 被 图 形 化， 并 展 
示 到 一 个 页 面 上 以 供 查看 。 
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在 这 个 网 站 上 创建 测试 的 时 候 ， 开 始 需要 先 填写 两 个 测试 用 例 ， 但 是 你 可 以 按 需 增 添加 任 
意 多 的 测试 。 你 还 可 以 设 定 在 每 个 测试 循环 开始 时 运行 的 setup 代码 ， 以 及 每 个 测试 循环 
结束 时 运行 的 teardown 代码 。 





可 以 通过 一 个 技巧 实现 只 用 一 个 测试 用 例 (如 果 需 要 测试 单个 方法 的 性 能 ， 
而 不 需要 对 比 的话 )， 就 是 在 首次 创建 的 时 候 在 第 二 个 测试 输入 框 填 入 占 位 
符 文字 ， 然 后 编辑 测试 并 把 第 二 个 测试 清空 ， 也 就 是 删除 了 它 。 你 总 是 可 以 
在 以 后 增加 新 的 测试 用 例 。 











可 以 定义 初始 页 面 设置 (导入 库 、 定 义 辅助 工具 函数 、 声 明 变 量 ， 等 等)。 还 有 选项 可 以 
在 需要 的 时 候 定义 setup 和 teardown 行为 ， 参 见 6.1.2 节 。 


完整 性 检查 
jsPerf 是 一 个 很 好 的 资源 ， 但 认真 分 析 的 话 ， 出 于 本 章 之 前 列 出 的 多 种 原因 ， 公 开发 布 的 
测试 中 有 大 量 是 有 缺陷 或 无 意义 的 。 


考虑 : 
// 用 例 1 


var x = []; 
for (var i=0; i<10; i++) { 
x[i] 总 Us 


} 
// 用 例 2 


var x = []; 
for (var i=0; i<10; i++) { 
x[x.length] = "x"; 


} 
// 用 例 3 


var x = []; 

for (var i=0; i<10; i++) { 
x.push( "x" ); 

} 


这 个 测试 场景 的 一 些 需要 思考 的 现象 如 下 。 




















。 对 开发 者 来 说 ， 极 常见 的 情况 是 : 把 自己 的 循环 放 入 测试 用 例 ， 却 忘 了 Benchmark.js 已 
经 实现 了 你 所 需 的 全 部 重复 。 非 常 有 可 能 这 些 情况 下 的 for 循环 完全 是 不 必要 的 噪音 。 

。 每 个 测试 用 例 中 x 的 声明 和 初始 化 可 能 是 不 必要 的 。 回 忆 一 下 之 前 的 内 容 ， 如 果 x = [] 
放 在 setup 代码 中 ， 它 并 不 会 在 每 个 测试 迁 代 之 前 实际 和 运行， 而 是 只 在 每 轮 测 试 之 前 运 
行 一 次 。 这 意味 着 x 将 会 持续 增长 到 非常 大 ， 而 不 是 for 循环 中 暗示 的 大 小 一 一 10。 











所 以 ， 其 目的 是 为 了 确定 测试 只 局 限于 JavaScript 引 


吗 ? 目的 可 能 是 这 样 ， 而 如 果 确 实 是 的 话 ， 
现 细 市。 














敬 如 何 处 理 小 数组 (大 小 为 19) 








你 必须 考虑 这 是 否 过 多 关注 了 微 秒 的 内 部 实 


另 一 方面 ， 测 试 的 目的 是 否 包含 数组 实际 上 增加 到 非常 大 之 后 的 环境 ?与 真实 使 用 情况 
相 比 ，JavaScript 处 理 大 数组 的 行为 是 否 适当 和 精确 呢 ? 


目的 是 否 是 找 出 x.Length 或 x.pushl.. 
大 ? 好 吧 ， 这 可 能 是 有 效 的 测试 目标 。 
当然 要 比 [..] 访问 慢 。 


但 话说 回来 ， 





) 对 向 数组 x 添加 内 容 的 操作 的 性 能 和 





影响 有 多 


push(..) 是 一 个 函数 调用 ， 所 以 它 


可 以 证 明 ， 用 例 1 和 2 要 比 用 例 3 公平 得 多 。 


以 下 是 另 一 个 例子 ， 展示 了 典型 的 不 同类 型 对 比 的 缺陷 : 


// 用 例 1 
var x = ["John" 
XSOFtCRE 


,"Albert","Sue","Frank","Bob"]; 


// 用 例 2 
var x = ["John","Albert","Sue"," 
x.sort( function mySort(a,b){ 
if (a < b) return -1; 
if (a > b) return 1; 
return 0; 


2 

， 很 明显 测试 目标 是 找 吕 
但 是 ， 通 过 把 函数 mysort(..) 指定 为 在 线 函 数 表达 式 ， 
测试 。 这 里 ， 第 二 个 
创建 了 一 个 新 的 函数 表达 式 。 


ee 但 是 将 3 


Frank","Bob"]; 


这 里 












































HH 自 定义 的 比较 函数 mySort(. 


个 用 例 中 测试 的 不 只 是 用 户 自 定义 JavaScript 函 


.) 比 内 建 默 认 比较 函数 慢 多 少 。 
你 已 经 创建 了 一 个 不 公平 /虚假 的 
函数 ， 它 还 在 每 个 迭代 中 


其 更 新 为 将 创建 一 ee 
国 数 对 比 ， 如 果 发 现在 线 函 数 表 达 式 创建 版 本 要 慢 2% ~ 20%， 你 会 





会 感到 吃惊 | 


Oe 0 ee 





mySort(. 








.) 的 声明 放 在 页 





不 必要 地 重新 声明 一 只 需要 在 测试 用 例 中 通过 各 字 引用 它 ; 





根据 前 面 的 例子 ， 还 有 一 个 陷阱 是 隐 式 地 给 一 个 测试 用 
致 “ 拿 苹果 与 橘子 对 比 ” 的 场景 ; 
// 用 例 1 


var x = [12,-14,0,3,18,0,2.9]; 
x.sort(); 














// 用 例 2 
var x = [12,-14,0,3,18,0,2.9]; 


在 测试 setup 中 ， 因 为 那 会 在 每 一 轮 


x.sort(mySort), 





例 避 免 或 添加 额外 的 工作 ， 从 而 导 
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x.sort( function mySort(a,b){ 
return a - b; 


ja 


除了 前 面 提 到 的 在 线 函 数 表达 式 陷阱 ， 第 二 个 用 例 的 mysort(..) 可 以 工作 。 因 为 你 给 它 提 
供 的 是 数字 ， 但 如 果 是 字符 串 的 话 就 会 失败 。 第 一 个 用 例 不 会 抛 出 错误 ， 但 它 的 行为 不 同 
了 ， 和 输出 结果 也 不 同 ! 这 应 该 很 明显 ， 但 是 两 个 测试 用 例 产 生 不 同 的 输出 几乎 骨 定 会 使 整 














个 测试 变 得 无 效 ! 








不 过 ， 在 这 种 情况 下 ， 除 了 不 同 的 输出 之 外 ， 内 建 的 比较 函数 sort(..) 实际 上 做 了 
mysort() 没有 做 的 额外 工作 ， 包 括 内 建 的 那个 把 比较 值 强制 类 型 转化 为 字符 串 并 进行 字典 
序 比 较 。 第 一 段 代 码 结果 为 [-14，6，0，12，18，2.9，3]， 而 第 二 段 代 码 结果 (基于 目标 





言 可 能 更 精确 ) 为 [-14, 06, 0, 2.9, 3, 12, 18]。 


所 以 ， 这 个 测试 是 不 公平 的 ， 因 为 对 于 不 同 的 用 例 ， 它 并 没有 做 完全 相同 的 事情 。 




















的 任何 结果 都 是 虚假 的 。 
同样 的 陷阱 可 能 会 更 加 不 易 察 觉 ， 





// 用 例 1 
var x = false; 
var y=xX?1:2; 





// 用 例 2 
Var Xx; 
var y=x?1:2; 























这 里 ， 目 的 可 能 是 测试 对 Boolean 值 进行 强 制 类 型 转换 对 性 能 的 冲击 : 如 果 x 表达 式 并 不 
是 Boolean 运算 符 ，? : 就 会 进行 强制 类 型 转换 (参见 本 书 的 “类 型 和 语法 ”部 分 )。 所 


以 ， 你 显然 可 以 接受 如 下 事实 : 第 二 个 用 例 中 有 额外 的 类 型 转换 工人 





F 要 做 。 


那么 不 易 察 觉 的 问题 是 什么 呢 ? 在 第 一 个 用 例 中 设 定 了 x 的 值 ， 而 在 另 一 个 中 则 没有 设 


定 ， 所 以 实际 上 你 在 第 一 个 用 例 中 做 了 在 第 二 个 用 例 中 没有 做 的 习 





(虽然 很 小 的 ) 影响 ， 可 以 试 着 这 样 : 
// 用 例 1 


var x = false; 
var y=xX?1:;2; 








// 用 例 2 
var x = undefined; 
var y=xX?1:2; 














EE。 要 消除 这 个 


在 的 

















现在 两 种 情况 下 都 有 赋值 语句 了 。 所 以 你 想 要 测试 的 内 容 (有 无 对 x 的 类 型 转换 ) 很 可 能 











就 更 加 精确 地 被 独立 出 来 并 被 测试 到 了 。 








6.4 写 好 测试 


我 看 看 能 不 能 讲 清 楚 我 在 这 里 想 要 说 明 的 更 重要 的 一 点 。 





要 写 好 测试 ,需要 认真 分 析 和 思考 两 个 测试 用 例 之 间 有 什么 区 别 ， 以 及 这 些 区 别 是 有 意 还 
是 无 意 的 。 


有 意 的 区 别 当 然 是 正常 的 ， 没 有 问题 ， 可 我 们 太 容 易 造 成 会 扭曲 结果 的 无 意 的 区 别 。 你 需 
要 非常 小 心 才 能 避免 这 样 的 扭曲 。 还 有 ， 你 可 能 有 意 造 成 某 个 区 别 ， 但 是 ， 对 于 这 个 测 
试 的 其 他 人 来 说 ， 你 的 这 个 意图 可 能 不 是 那么 明显 ， 所 以 他 们 可 能 会 错误 地 怀疑 (或 信 
任 ! ) 你 的 测试 。 如 何 解决 这 样 的 问题 呢 ? 
































编写 更 好 更 清晰 的 测试 。 但 还 有 ， 花 一 些 时 间 来 编写 文档 (使 用 jsPerf.com 上 的 Description 
字段 和 /或 代码 注释 ) 精确 表达 你 的 测试 目的 ， 甚 至 对 于 那些 微小 的 细节 也 要 如 此 。 找 出 那 
些 有 意 的 区 别 ， 这 会 帮助 别人 和 未 来 的 你 更 好 地 识别 出 那些 可 能 扭曲 测试 结果 的 无 意 区 别 。 
通过 在 页 面 或 测试 setup 设置 中 预先 声明 把 与 测试 无 关 的 事情 独立 出 来 ， 使 它们 移出 测试 
计时 的 部 分 。 

不 要 试图 罕 化 到 真实 代码 的 微小 片段 ， 以 及 脱离 上 下 文 而 只 测量 这 一 小 部 分 的 性 能 ， 因 为 
包含 更 大 (仍然 有 意义 的 ) 上 下 文 时 功能 测试 和 性 能 测试 才 会 更 好 。 这 些 测试 可 能 也 会 运 
行 得 慢 一 点 ， 这 意味 着 环境 中 发 现 的 任何 差异 都 更 有 意义 。 


6.5 ” 微 性 能 

到 目前 为 止 ， 我们 一 直 在 围绕 各 种 微 性 能 问题 讨论 ， 并 始终 认为 沉迷 于 此 是 不 可 取 的 。 现 
在 我 要 花费 一 点 时 间 直 面 这 个 问题 。 

在 考虑 对 代码 进行 性 能 测试 时 ， 你 应 该 习惯 的 第 一 件 事 情 就 是 你 所 写 的 代码 并 不 总 是 引擎 
真正 运行 的 代码 。 在 第 1 章 讨论 编译 器 语句 重 排序 问题 时 ， 我 们 简单 介绍 过 这 个 问题 。 不 
过 这 里 要 说 的 是 ， 有 时候 编译 器 可 能 会 决定 执行 与 你 所 写 的 不 同 的 代码 ， 不 只 是 顺序 不 
同 ， 实 际 内 容 也 会 不 同 。 


来 考虑 下 面 这 段 代码 : 




























































































var foo = 41; 


(function(){ 
(function(){ 
(function(baz){ 
var bar = foo + baz; 
J rs 
})(1); 
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DO; 
])(); 
可 能 你 会 认为 最 内 层 函 数 中 的 引用 foo 需要 进行 三 层 作 用 域 查找 。 本 系列 的 《你 不 知道 的 
0 “作用 域 和 闭 包 ”部 分 讨论 了 词法 作用 域 是 如 何 工 作 的 。 事实 上 ， 
编译 器 通常 会 缓存 这 样 的 查找 结果 ， 使 得 从 不 同 的 作用 域 引用 foo 实际 上 并 没有 任何 额外 
的 花费 。 


但 是 ， 还 有 一 些 更 深入 的 问题 需要 思考 。 如 果 编 译 器 意识 到 这 个 foo 只 在 一 个 位 置 被 引用 
而 别处 没有 任何 引用 ， 并 且 注 意 到 这 个 值 只 是 41 而 从 来 不 A 



































JavaScript 可 能 决定 完全 去 掉 foo 变量 ， 将 其 值 在 线 化 ， 这 不 是 很 可 能 发 生 也 可 以 接受 的 
吗 ? 就 像 下 面 这 样 : 





(function(){ 
(function(){ 
(function(baz){ 
var bar = 41 + baz; 
//.. 
})(1); 
DD) 0; 


])(); 


当然 ， 这 里 编译 器 有 可 能 也 对 baz 进行 类 似 的 分 析 和 重 写 。 


当 你 把 JavaScript 代码 看 作对 引擎 要 做 什么 的 提示 和 建议 ， 而 不 是 逐 字 逐 句 的 要 求 时 ， 你 
就 会 意识 到 ， 对 于 有 具体 语法 细节 的 很 多 执着 迷恋 已 经 烟消云散 了 。 
function factorial(n) { 
if (n < 2) return 1; 
return n * factorial( n - 1 ); 


} 


factorial( 5 ); // 120 





啊 ， 很 不 错 的 老式 阶乘 算法 ! 你 可 能 认为 JavaScript 就 像 代 码 这 样 运行 。 但 说 实话 ， 只 是 
可 能 ， 我 真 的 也 不 确定 。 

但 作为 一 件 趣事 ， 同 样 的 代码 用 C 编写 并 用 高 级 优化 编译 的 结果 是 ， 编 译 器 意识 到 调用 
factorial(5) 可 以 直接 用 常量 值 120 来 代替 ， 完 全 销 除 了 国 数 的 调用 ! 





























另外 ， 有 些 引 擎 会 进行 名 为 递归 展开 的 动作 ， 在 这 里 ， 它 能 够 意识 到 你 表达 的 递归 其 实 可 
以 用 循环 更 简单 地 实现 (〈 即 优化 ) 。JavaScript 引擎 有 可 能 会 把 前 面 的 代码 重 写 如 下 来 运行 : 





function factorial(n) { 


if (n < 2) return 1; 


var res = 1; 
for (var i=n; i>1; i--) { 


res *= i; 
} 
return res; 
} 
factorial( 5 ); // 120 


现在 ， 我 们 设想 一 下 ， 在 前 面 的 代码 片段 中 你 还 担心 n * factorial(n-1) 和 n *= 
factorial(--n) 哪个 运行 更 快 。 其 至 可 能 你 还 进行 了 性 能 测试 来 确定 哪个 更 好 。 但 你 忽 上 略 
了 这 个 事实 : 在 更 大 的 上 下 文中 ， 引 擎 可 能 并 不 会 运行 其 中 任何 一 行 代 码 ， 因 为 它 可 能 会 








进行 递归 


说 到 --， 

















展开 ! 
--n 对 比 n-- 经 常 被 作为 那些 通过 选择 --n 版 本 来 优化 的 情况 进行 引用 ， 





四 








为 从 


理论 上 说 ， 在 汇编 语言 级 上 它 需 要 处 理 的 工作 更 少 。 


对 现代 JavaScript 来 说 ， 这 一 类 执 迷 基 本 上 毫 无 意义 。 这 就 属于 你 应 该 让 引擎 来 关心 的 那 
一 类 问题 。 你 应 该 编写 意义 最 明确 的 代码 。 比 较 下 面 的 三 个 for 循环 : 


// 选择 1 


for 


上 














(var i=0; i<10; i++) { 
console.log( i ); 


// 选择 2 


for 


4 


(var i=0; i<10; ++i) { 
console.log( i ); 


// 选择 3 


for 


} 


(var i=-1; ++i<10; ) { 
console.log( i ); 


即使 你 认为 理论 上 第 二 个 或 第 三 个 选择 要 比 第 一 个 选择 性 能 高 那么 一 点 点 ， 这 也 是 值得 怀 
疑 的 。 第 三 个 循环 更 令 人 迷惑 ， 因 为 使 用 了 ++i 先 递 增 运算 ， 你 就 不 得 不 把 巧 从 -1 开始 计 


算 。 而 第 





一 个 和 第 二 个 选择 之 间 的 区 别 实际 上 完全 无 关 紧 要 。 




















完全 有 可 能 一 个 JavaScript 引擎 看 到 了 一 个 使 用 it+ 的 位 置 ， 并 意识 到 它 可 能 将 其 安全 地 
替换 为 等 价 的 ++ti， 这 意味 着 你 花费 在 决定 采用 哪 一 种 方案 上 的 时 间 完 全 被 浪费 了 ， 而 且 
产 出 还 毫 无 意义 。 
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这 里 是 另 一 个 常见 的 思春 的 执 迷 于 微观 性 能 的 例子 ， 

var Xs a 

// 选择 1 

for (var i=0; i < x.length; i++) { 
f/m 

} 

// 选择 2 

for (var i=0, len = x.length; i < len; i++) { 
fs 

} 




















理论 上 说 ， 这 里 应 该 在 变量 Len 中 缓存 x 数组 的 长 度 ， 因 为 表面 上 它 不 会 改变 ， 来 避免 在 
每 个 循环 迭代 中 计算 x, tength 的 代价 。 


如 果 运 行 性 能 测试 来 比较 使 用 x.tLength 和 将 其 缓存 到 len 变量 中 的 方案 ， 你 会 发 现 尽 管理 
论 听 起 来 疫 错 ， 但 实际 的 可 测 差别 在 统计 上 是 完全 无 关 紧要 的 。 






































实际 上 ， 在 某 些 像 v8 这 样 的 引擎 中 ， 可 以 看 到 (http://mrale.ph/blog/2014/12/24/array- 
length-caching.html) ， 预 先 缓存 长 度 而 不 是 让 引擎 为 你 做 这 件 事 情 ， 会 使 性 能 稍微 下 降 一 
点 。 不 要 试图 和 JavaScript 引擎 比 谁 聪 明 。 对 性 能 优化 来 说， 你 很 可 能 会 输 。 























6.5.1 不 是 所 有 的 引擎 都 类 似 

各 种 浏览 器 中 的 不 同 JavaScript 引擎 可 以 都 是 “符合 规范 的 "， 但 其 处 理 代码 的 方法 却 完 全 
不 同 。JavaScript 规范 并 没有 任何 性 能 相关 的 要 求 ， 好 吧 ， 除 了 ES6 的 “ 尾 调用 优化 ”， 这 
部 分 将 在 6.6 节 介 绍 。 


引擎 可 以 自由 决定 一 个 运算 是 否 需要 优化 ， 可 能 进行 权衡 ， 替 换 掉 运算 次 要 性 能 。 对 一 个 
运算 来 说 ， 很 难 找到 一 种 方法 使 其 在 所 有 浏览 器 中 都 运行 得 较 快 。 


在 一 些 JavaScript 开发 社区 有 一 场 运 动 ， 特 别 是 在 那些 使 用 Node.js 工作 的 开发 者 中 间 。 这 
场 运动 是 要 分 析 v8 JavaScript 引擎 的 特定 内 部 实现 细节 ， 决 定编 写 裁剪 过 的 JavaScript 代 
码 来 最 大 程度 地 利用 v8 的 工作 模式 。 通 过 这 样 的 努力 ， 你 可 能 会 获得 令 人 吃惊 的 高 度 性 
能 优化 。 因 此 ， 这 种 努力 的 回报 可 能 会 很 高 。 






































如 下 是 v8 的 一 些 经 常 提 到 的 例子 (https://github.com/petkaantonov/bluebird/wiki/Optimization- 
killers ) 。 


。 不 要 从 一 个 函数 到 另外 一 个 函数 传递 argunents 变量 ， 因 为 这 样 的 泄漏 会 降低 函数 实现 
速度 。 
。 把 try. .catch 分 离 到 单独 的 函数 里 。 浏 览 器 对 任何 有 try. .catch 的 函数 实行 优化 都 有 

一 些 困难 ， 所 以 把 这 部 分 移 到 独立 的 函数 中 意味 着 你 控制 了 反 优化 的 害处 ， 并 让 其 包含 
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的 代码 可 以 优化 。 


不 过 ， 与 其 关注 这 些 具体 技巧 ， 倒 不 如 让 我 们 在 通用 的 意义 上 对 v8 独 有 的 优化 方法 进行 
一 次 完整 性 检查 。 





确实 要 编写 只 需 在 一 个 JavaScript 引擎 上 运行 的 代码 吗 ? 即使 你 的 代码 目前 只 需要 Node. 
js， 假 定 使 用 的 JavaScript 引擎 永远 是 v8 是 否 可 靠 呢 ? 有 没有 可 能 某 一 天 ， 几 年 以 后 ， 会 
有 Node.js 之 外 的 另 一 种 服务 器 端 JavaScript 平台 被 选中 运行 你 的 代码 呢 ? 如 果 你 之 前 的 优 
化 如 今 对 新 引擎 而 言 成 了 一 种 运行 很 慢 的 方法 ， 要 怎么 办 呢 ? 























或 者 如 果 从 现在 开始 你 的 代码 总 是 保持 运行 在 v8 上 ， 但 是 v8 决定 在 某 些 方面 修改 其 运算 
的 工作 方式 ， 过 去 运行 很 快 的 方式 现在 很 慢 ， 或 者 相反 ， 那 又 该 怎么 办 ? 


























这 些 场景 并 不 仅仅 只 是 理论 。 过 去 把 多 个 字符 串 值 放 在 一 个 数组 中 ， 然 后 在 数组 上 调用 
join("") 来 连接 这 些 值 比 直接 用 + 连接 这 些 值 要 快 。 这 一 点 的 历史 原因 是 微妙 的 ， 涉 及 字 
符 串 值 在 内 存 中 如 何 存储 和 管理 这 样 的 内 部 实现 细节 。 


因此 ， 那 时 的 工业 界 广泛 传播 的 最 佳 实 践 建议 是 : 开发 者 应 总 是 使 用 数组 的 join(..) 方 
法 。 很 多 人 遵从 了 这 一 建议 。 


























但 随 着 时 间 的 发 展 ，JavaScript 引擎 改变 了 内 部 管理 字符 串 的 方法 ， 特 别 对 + 连接 进行 了 
优化 。 它 们 并 没有 降低 join(..) 本 身 的 效率 ， 而 是 花 了 更 多 精力 提高 + 的 使 用 ， 因 为 join 
仍然 是 广泛 使 用 的 。 





主要 基于 某 些 方法 当前 的 广泛 使 用 来 标准 化 或 优化 这 些 特定 方法 的 实践 通常 
称 为 (比喻 意义 上 的 )“ 给 已 被 牛 踏 出 的 路 铺 砖 ”。 























一 旦 新 的 处 理 字符 串 和 连接 的 方法 确定 下 来 ， 很 遗憾 ， 所 有 那些 使 用 数组 join(.. ) 来 连接 
字符 串 的 代码 就 成 次 优 的 了 。 


另 一 个 例子 : 曾几何时 ，Opera 浏览 器 在 如 何 处 理 原生 封装 的 对 象 的 封 箱 / 开 箱 上 与 其 他 
浏览 器 不 同 (参见 本 书 的 “类 型 和 语法 ”部 分 )。 同 样 ， 他 们 对 开发 者 的 建议 是 ， 如果 需 
要 访问 length 这 样 的 属性 或 charAt(..) 这 样 的 方法 ， 应 使 用 String 对 象 而 不 是 原生 字符 
串 值 。 这 个 建议 对 那 时 候 的 Opera 来 说 可 能 是 正确 的 ， 但 是 它 完 全 与 同时 代 的 其 他 主流 浏 
览 器 背道而驰 ， 因 为 后 者 都 对 原生 字符 串 有 特殊 的 优化 而 不 是 对 其 对 象 封 装 。 









































我 想 ， 即 使 是 对 于 今天 的 代码 ， 这 些 陷阱 至 少 是 可 能 出 现 的 ， 如 有 果 不 是 很 容易 发 生 的 话 。 
因此 ， 我 对 在 我 的 代码 中 单纯 根据 引擎 实现 细节 进行 的 广泛 性 能 优化 非常 小 心 ， 特 别 是 如 
果 这 些 细节 只 对 于 单个 引擎 成 立 的 话 。 
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反 过 来 的 情形 也 需要 慎重 : 你 不 应 该 修改 一 段 代码 以 通过 高 性 能 运行 一 段 代 码 ， 进 而 绕 过 
一 个 引擎 的 困难 之 处 。 


从 历史 上 看 ， 正 一 直 是 这 类 问题 的 主要 源头 。 因 为 在 很 多 场景 下 ， 老 版 的 正 都 挣扎 于 许 
多 性 能 方面 的 问题 ， 而 同时 期 的 其 他 主流 浏览 器 却 似乎 没什么 问题 。 实 际 上 我 们 刚才 讨论 
的 字符 串 连 接 问 题 在 IE6 和 下 7 时 期 是 一 个 真实 的 问题 ， 那 时 候 通过 join(..) 可 能 会 得 到 
比 + 更 好 的 性 能 。 


但 是 ， 如 果 只 有 一 个 浏览 器 出 现 性 能 问题 ， 就 建议 使 用 可 能 在 其 他 所 有 浏览 器 都 是 次 优 的 
代码 方案 ， 可 能 会 带 来 麻烦 。 即 使 这 个 浏览 器 在 你 网 站 用 户 中 占据 最 大 的 市 场 份额 也 是 如 
此 ， 可 能 更 实际 的 方法 是 编写 合适 的 代码 ， 并 依赖 浏览 器 以 更 好 的 优化 来 更 新 自己 。 


“没有 比 临 时 hack 更 持久 的 了 ”。 很 有 可 能 你 现在 编写 的 用 来 绕 过 一 些 性 能 bug 的 代码 可 能 
比 浏 览 器 的 性 能 问题 本 身 存在 得 更 长 和 久 。 


在 浏览 器 每 五 年 才 更 新 一 次 的 时 候 ， 这 是 个 很 难 作出 的 抉择 。 但 是 到 了 现在 ,浏览 器 更 新 
的 速度 要 快 得 多 (尽管 移动 世界 显然 还 落 在 后 面 )， 它 们 都 彼此 竞争 着 对 Web 功能 进行 越 
来 越 好 的 优化 。 

如 果 你 遇 到 这 样 的 情形 ， 即 一 个 浏览 器 有 性 能 问题 而 其 他 浏览 器 没有 ， 那 就 要 确保 通过 随 
便 什么 可 用 的 渠道 把 这 个 问题 报告 其 开发 者 。 多 数 浏览 器 都 提供 了 开放 的 bug 跟踪 工具 用 
于 此 处 。 









































我 建议 只 有 在 浏览 器 的 性 能 问题 确实 引发 彻底 的 中 断 性 故障 时 才 去 绕 过 它 ， 
不 要 仅仅 因为 它 让 人 讨厌 就 那么 做 。 我 也 会 非常 小 心地 检查 ， 以 确定 性 能 
hack 在 其 他 浏览 器 上 不 会 有 显著 的 消极 副作用 。 











6.5.2 ”大 局 

我 们 应 该 关注 优化 的 大 局 ， 而 不 是 担心 这 些微 观 性 能 的 细微 差别 。 

怎么 知道 什么 是 大 局 呢 ? 首先 要 了 解 你 的 代码 是 否 运 行 在 关键 路 径 上 。 如 果 不 在 关键 路 径 
上 ， 你 的 优化 就 很 可 能 得 不 到 很 大 的 收益 。 


有 没有 听 过 “这 是 过 早 优化 ”这 样 的 警告 ?这 来 自 于 高 德 纳 著名 的 一 句 话 :“ 过 早 优化 是 
万 恶 之 源 。” 很 多 开发 者 都 会 引用 这 句 话 来 说 明 多 数 优化 都 是 “过 早 的 "， 因 此 是 白费 力 
气 。 和 通常 情况 一 样 ， 事 实 要 更 加 微妙 一 些 。 














这 里 是 高 德 纳 的 原 话 及 上 下 文 (http://web.archive.org/web/20130731202547/http://pplab.snu. 
ac.kr/courses/adv_p105/papers/p261-knuth.pdf) (重点 强调 ) : 





程序 员 们 浪费 了 大 量 的 时 间 用 于 思考 ， 或 担心 他 们 程序 中 非 关 键 部 分 的 速度 ， 这 
些 针 对 效率 的 努力 在 调试 和 维护 方面 带 来 了 强烈 的 负面 效果 。 我 们 应 该 在 ， 比 如 
说 97% 的 时 间 里 ， 忘 掉 小 处 的 效率 : 过 早 优 化 是 万 恶 之 源 。 但 我 们 不 应 该 错过 
关键 的 3% 中 的 机 会 。 





计算 访谈 6 (1974 年 12 月 ) 


我 相信 这 么 解释 高 德 纳 的 意思 是 合理 的 :“ 非 关键 路 径 上 的 优化 是 万 恶 之 源 。 所以， 关键 
是 确定 你 的 代码 是 否 在 关键 路 径 上 一 一 如 果 在 的 话 ， 就 应 该 优化 ! 


ee es 
; 而 花 在 非 关 键 路 径 优化 上 的 时 间 都 不 值得 ， 不 管 节省 的 时 间 多 么 多 。 


如 果 你 的 代码 在 关键 路 径 上 ， 比 如 是 一 段 将 要 反复 运行 多 次 的 “ 热 ”代码 ， 或 者 在 用 户 会 
注意 到 的 UX 关键 位 置 上 ， 如 动画 循环 或 CSS 风格 更 新 ， 那 你 就 不 应 该 吝惜 精力 去 采用 有 
意义 的 、 可 测量 的 有 效 优化 。 


举例 来 说 ， 考 虑 一 下 : 一 个 关键 路 径 动画 循环 需要 把 一 个 字符 串 类 型 转换 到 数字 。 
很 多 种 方法 可 以 实现 〈 参 见 本 书 的 “类 型 和 语法 ”部 分 )， 但 是 哪 一 种 ， 如 果 有 的 话 ， 是 
最 快 的 呢 ? 














var x = "42"; // 需要 数字 42 


// 选择 1: 让 隐 式 类 型 转换 自动 发 生 


var y=x/2 











// 选择 2: 使 用 parseInt(..) 
var y = parseInt( x, 0 ) / 2; 





// 选择 3: 使 用 Number(..) 
var y = Number( x ) / 2; 











// 选择 4: 使 用 一 元 运算 符 + 
var y= +X / 2; 














// 选项 5: 使 用 一 元 运算 符 | 
var y= (x | 0) /2; 


我 将 把 这 个 问题 留 给 你 作为 练习 。 如 果 感 兴趣 的 话 ， 可 以 建立 一 个 测试 ， 检 
查 这些 选 择 之 间 的 性 能 差异 。 








在 芳 虑 这 些 不 同 的 选择 时 ， 就 像 别人 说 的 ,“ 其 中 必 有 一 个 是 与 众 不 同 的 ”。parseInt(..) 
可 以 实现 这 个 功能 ， 但 是 它 也 做 了 更 多 的 工作 : 它 解析 字符 串 而 不 是 近 几 年 进行 类 型 转 
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换 。 你 很 可 能 会 猜测 parseInt(..) 是 一 个 比较 慢 的 选择 ， 应 该 避免 ， 这 是 正确 的 。 

















当然 ， 如 果 x 可 能 是 一 个 需要 解析 的 值 ， 比 如 "42px" (比如 来 自 CSS 风格 查找 )， 那 

















parseInt(..) 就 确实 是 唯一 合理 的 选择 了 ! 





Number(..) 也 是 一 个 函数 调用 。 从 行为 角度 说 ， 它 和 一 元 运算 符 + 选择 是 完全 一 样 的 ， 但 
实际 上 它 可 能 更 慢 一 些 ， 要 求 更 多 的 执行 函数 的 机 制 。 当 然 ， 也 可 能 JavaScript 引擎 意识 
到 了 行为 上 的 相同 性 ， 会 帮 你 把 Nunber(..) 在 线 化 ( 即 +x) | 








但 是 ， 请 记 住 , 沉迷 于 +x 与 x | 9 的 对 比 在 绝 大 多 数 情况 下 都 是 浪费 时 间 。 这 是 一 个 微观 





性 能 问题 ， 是 一 个 你 不 应 该 让 其 影响 程序 可 读 性 的 问题 。 








尽管 程序 关键 路 径 上 的 性 能 非常 重要 ， 但 这 并 不 是 唯一 要 萎 虑 的 因素 。 在 性 能 方面 大 体 相 
似 的 几 个 选择 中 ， 可 读 性 应 该 是 另外 一 个 重要 的 考量 因素 。 





6.6 尾 调 用 优化 

















正如 前 面 我 们 提 到 的 ，ES6 包含 了 一 个 性 能 领域 的 特殊 要 求 。 这 与 一 个 涉及 函数 调用 的 特 
定 优化 形式 相关 : 尾 调 用 优化 (Tail Call Optimization，TCO)。 

简单 地 说 ， 尾 调用 就 是 一 个 出 现在 另 一 个 函数 “结尾 ”处 的 函数 调用 。 这 个 调用 结束 后 就 
没有 其 余 事 情 要 做 了 (除了 可 能 要 返回 结果 值 )。 





























举例 来 说 ， 以 下 是 一 个 非 递归 的 尾 调 用 : 





function foo(x) { 
return x; 


} 


function bar(y) { 
return foo( y+ 1 ); 


3} 


function baz() { 
return 1 + bar( 40 ); 


3} 


baz(); 


// 尾 调用 














// 非 尾 调用 








// 42 





foo(y+1) 是 bar(..) 中 的 尾 调用 ， 因 为 在 fool..) 完成 后 ，bar(..) 也 完成 了 ， 并 且 只 需要 
返回 foo(..) 调用 的 结果 。 然 而 ，bar(49) 不 是 尾 调 用 ， 因 为 在 它 完 成 后 ， 它 的 结果 需要 加 





上 1 才能 由 baz() 返回 。 














不 详细 谈 那 么 多 本 质 细节 的 话 ， 调 用 一 个 新 的 国 数 需 要 额外 的 一 块 预 留 内 存 来 管理 调用 
栈 ， 称 为 栈 帧 。 所 以 前 面 的 代码 一 般 会 同时 需要 为 每 个 baz()、bar(..) 和 foo(.…) 保留 一 











个 栈 帧 。 


然而 ， 如 果 支 持 TCO 的 引擎 能 够 意识 到 foo(y+1) 调用 位 于 尾部 ， 这 意味 着 bar(..) 基本 
上 已 经 完成 了 ， 那 么 在 调用 foo(..) 时 ， 它 就 不 需要 创建 一 个 新 的 栈 帧 ， 而 是 可 以 重用 已 
有 的 bar(..) 的 栈 帧 。 这 样 不 仅 速度 更 快 ， 也 更 节省 内 存 。 


在 简单 的 代码 片段 中 ， 这 类 优化 算 不 了 什么 , 但 是 在 处 理 递 归 时 ， 这 就 解决 了 大 问题 ， 特 
别 是 如 果 递 归 可 能 会 导致 成 百 上 千 个 栈 帧 的 时 候 。 有 了 TCO， 引 擎 可 以 用 同一 个 栈 帧 执行 
所 有 这 类 调用 |! 












































于 




















递归 是 JavaScript 中 一 个 纷繁 复杂 的 主题 。 因 为 如 果 没 有 TCO 的 话 ， 引 擎 需要 实现 一 
个 随意 (还 彼此 不 同 ! ) 的 限制 来 界定 递归 栈 的 深度 ， 达 到 了 就 得 停止 ， 以 防止 内 存 耗 
尽 。 有 了 TCO， 尾 调用 的 递归 函数 本 质 上 就 可 以 任意 运行 ， 因 为 再 也 不 需要 使 用 额外 的 
内 存 ! 


考虑 到 前 面 递 归 的 factorial(..)， 这 次 重 写 成 TCO 友好 的 : 





function factorial(n) { 
function fact(n,res) { 
if (n < 2) return res; 


return fact( n - 1, nx res ); 


} 
return fact( n, 1 ); 
} 
factorial( 5 ); // 120 








这 个 版 本 的 factorial(..) 仍然 是 递归 的 ， 但 它 也 是 可 以 TCO 优化 的 ， 因 为 内 部 的 两 次 
fact(..) 调用 的 位 置 都 在 结尾 处 。 








有 一 点 很 重要 ， 需 要 注意 : TCO 只 用 于 有 实际 的 尾 调用 的 情况 。 如 果 你 写 了 
一 个 没有 尾 调用 的 递归 函数 ， 那 么 性 能 还 是 会 回 到 普通 栈 帧 分 配 的 情形 ， 引 
擎 对 这 样 的 递归 调用 栈 的 限制 也 仍然 有 效 。 很 多 递归 函数 都 可 以 改写 ， 就 像 
刚刚 展示 的 factorial(..) 那样 ， 但 是 需要 认真 注意 细节 。 

















ES6 之 所 以 要 求 引 擎 实现 TCO 而 不 是 将 其 留 给 引擎 自由 决定 ， 一 个 原因 是 缺乏 TCO 会 导 
致 一 些 JavaScript 算法 因为 害怕 调用 栈 限 制 而 降低 了 通过 递归 实现 的 概率 。 





如 有 果 在 所 有 的 情况 下 引擎 缺乏 TCO 只 是 降低 了 性 能 ， 那 它 就 不 会 成 为 ES6 所 要 求 的 东西 。 
但 是 ， 由 于 缺乏 TCO 确实 可 以 使 一 些 程序 变 得 无 法 实现 ， 所 以 它 就 成 为 了 一 个 重要 的 语 
言 特性 而 不 是 隐藏 的 实现 细节 。 
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ES6 确保 了 JavaScript 开发 者 从 现在 开始 可 以 在 所 有 符合 ES6+ 的 浏览 器 中 依赖 这 个 优化 。 
这 对 JavaScript 性 能 来 说 是 一 个 胜利 。 
6.7 小结 


对 一 段 代 码 进行 有 效 的 性 能 测试 ， 特 别 是 与 同样 代码 的 另外 一 个 选择 对 比 来 看 看 哪 种 方案 
更 快 ， 需要 认真 注意 细 市 。 





与 其 打造 你 自己 的 统计 有 效 的 性 能 测试 逻辑 ， 不 如 直接 使 用 Benchmark.js 库 ， 它 已 经 为 你 
实现 了 这 些 。 但 是 ， 编 写 测 试 要 小 心 ， 因 为 我 们 很 容易 就 会 构造 一 个 看 似 有 效 实际 却 有 缺 
名 的 测试 ， 即 使 是 微小 的 差异 也 可 能 扭曲 结果 ， 使 其 完全 不 可 靠 。 


从 尽 可 能 多 的 环境 中 得 到 尽 可 能 多 的 测试 结果 以 消除 硬件 /设备 的 偏差 ， 这 一 点 很 重要 。 
jsPerf.com 是 很 好 的 网 站 ， 用 于 众 包 性 能 测试 运行 。 











= 




















遗憾 的 是 ， 很 多 常用 的 性 能 测试 执 迷 于 无 关 紧 要 的 微观 性 能 细节 ， 比 如 x+t+ 对 比 ++x。 编 
写 好 的 测试 意味 着 理解 如 何 关 注 大 局 ， 比 如 关键 路 径 上 的 优化 以 及 避免 落 入 类 似 不 同 的 
JavaScript 实现 细节 这 样 的 陷阱 中 。 




















尾 调用 优化 是 ES6 要 求 的 一 种 优化 方法 。 它 使 JavaScript 中 原本 不 可 能 的 一 些 递 归 模 式 变 
得 实际 。TCO 允许 一 个 函数 在 结尾 处 调用 另外 一 个 函数 来 执行 ， 不 需要 任何 额外 资源 。 这 
意味 着 ， 对 递归 算法 来 说 ， 引 擎 不 再 需要 限制 栈 深度 。 








附录 A 
asynquence 库 





第 1 章 和 第 2 章 介绍 了 很 多 典型 异步 编程 模式 的 细节 ， 以 及 通常 如 何 通过 回调 来 实现 。 但 
是 ， 我 们 也 看 到 了 为 什么 回调 在 功能 上 有 致命 的 限制 性 ， 这 进而 引出 了 第 3 章 和 第 4 章 中 
对 Promise 和 生成 器 的 介绍 。 它 们 为 构建 异步 提供 了 更 坚固 、 更 可 信任 、 更 合理 的 基础 。 




















本 书 中 多 次 提 到 我 自己 的 异步 库 asynquence (http://github.com/getify/asynquence) 
(async+sequence=asynquence) 。 现 在 我 要 简单 介绍 一 下 它 的 工作 方式 以 及 为 什么 其 独特 的 
设计 是 重要 和 有 用 的 。 


才 录 B 将 探索 几 种 高 级 的 异步 模式 ， 但 你 可 能 需要 一 个 库 才 能 让 这 些 模式 变 得 足够 实用 。 
我 们 将 使 用 asynquence 来 表达 这 些 模 式 ， 所 以 需要 花费 一 点 时 间 先 来 了 解 一 下 这 个 库 。 











2 





当然 ，asynquence 并 不 是 异步 编程 的 唯一 好 选择 。 在 这 个 领域 的 确 有 很 多 非常 好 的 库 。 但 
是 ， 通 过 把 所 有 这 些 模式 中 最 好 的 部 分 组 合 到 单个 库 中 ，asynquence 提供 了 一 个 独特 的 视 
角 ， 而 且 它 还 是 建立 在 单个 基本 抽象 之 上 的 ， (异步 ) 序列 。 














我 的 前 提 是 ， 高 级 JavaScript 编程 通常 需要 把 各 种 不 同 的 异步 模式 一 块 块 编织 在 一 起 ， 而 
这 通常 是 完全 留 给 开发 者 来 实现 的 。asynquence 不 再 需要 引入 分 别 关 注 异 步 不 同方 面 的 两 
个 或 更 多 异步 库 ， 而 是 把 它们 统一 为 序列 步骤 的 不 同 变 体 ， 这 样 就 只 需要 学 习 和 部 署 一 个 
核心 库 。 








通过 asynquence 使 得 Promise 风格 语义 的 异步 流程 控制 编程 完成 起 来 非常 简单 。 我 确信 这 
是 很 有 价值 的 ， 所 以 这 也 就 是 为 什么 这 里 只 关注 这 一 个 库 。 


首先 ， 我 要 解释 asynquence 音 后 的 设计 原理 ， 然 后 通过 代码 示例 展示 其 API 的 工作 方式 。 
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A.1 序列 与 抽象 设计 





























理解 asynquence 要 从 理解 一 个 基本 的 抽象 开始 : 一 个 任务 的 一 系列 步 又， 不管 各 自 是 同步 
的 还 是 异步 的 ， 都 可 以 整合 起 来 看 成 一 个 序列 (sequence) 。 换 句 话说， 一 个 序列 代表 了 一 
个 任务 的 容器 ， 由 完成 这 个 任务 的 独立 〈 可 能 是 异步 ) 的 步骤 组 成 。 





序列 中 的 每 个 步骤 在 形式 上 通过 一 个 Promise (参见 第 3 章 ) 控制 。 也 就 是 说 ， 添 加 到 序 
列 中 的 每 个 步骤 隐 式 地 创建 了 一 个 Promise 连接 到 之 前 序列 的 尾 端 。 由 于 Promise 的 语义 ， 
序列 中 每 个 单个 步骤 的 运行 都 是 异步 的 ， 即 使 是 同步 完成 这 个 步骤 也 是 如 此 。 


另外 ， 序 列 通常 是 从 一 个 步骤 到 一 个 步骤 线性 处 理 的 ， 也 就 是 说 步骤 2 要 在 步骤 1 完成 之 
后 开始 ， 以 此 类 推 。 


当然 ， 可 以 从 现 有 的 序列 分 又 (fork) 出 新 的 序列 ， 这 意味 着 主 序列 到 达 流 程 中 的 这 个 点 
上 就 会 发 生 分 又 。 也 可 以 通过 各 种 方法 合并 序列 ， 包 括 在 流程 中 的 特定 点 上 让 一 个 序列 包 
含 另 一 个 序列 。 














序列 有 点 类 似 于 Promise 链 。 然 而 ， 通 过 Promise 链 没 有 “句柄 ”可 以 拿 到 整个 链 的 引用 。 
拿 到 的 Promise 引用 只 代表 链 中 当前 步骤 以 及 后 面 的 其 他 步骤 。 本 质 上 说 ， 你 无 法 持 有 一 
个 Promise 链 的 引用 ， 除 非 你 拿 到 链 中 第 一 个 Promise 的 引用 。 


很 多 情况 下 ， 持 有 到 整个 序列 的 引用 是 非常 有 用 的 。 其 中 最 重要 的 就 是 序列 的 停止 或 取 
消 。 就 像 我 们 在 第 3 章 扩展 讨论 过 的 ，Promise 本 身 永远 不 应 该 可 以 被 取消 ， 因 为 这 违背 
了 一 个 基本 的 设计 规则 : 外 部 不 可 变性 。 























但 对 序列 来 说 ， 并 没有 这 样 的 不 可 变 设计 原则 ， 主 要 是 因为 序列 不 会 被 作为 需要 不 可 
变 值 语义 的 未 来 值 容器 来 传递 。 因 此 ， 序 列 是 处 理 停止 或 取消 行为 的 正确 抽象 层级 。 
asynquence 序列 可 以 在 任何 时 间 被 abort()， 序 列 会 在 这 个 时 间 点 停止 ， 不 会 因为 任何 理 
由 继续 进行 下 去 。 


之 所 以 选择 在 Promise 之 上 建立 序列 抽象 用 于 流程 控制 的 目的 ， 还 有 很 多 别 的 理由 。 


第 一 ，Promise 链接 更 多 是 一 个 手工 过 程 。 一 旦 开始 在 大 范围 的 程序 内 创建 和 链接 
Promise， 事 情 就 可 能 会 变 得 十 分 乏味 。 这 种 麻烦 可 能 会 极 大 阻碍 开发 者 在 Promise 本 来 十 
分 适用 的 地 方 使 用 Promise。 


抽象 的 目的 是 减少 重复 样板 代码 和 避免 乏味 ， 所 以 序列 抽象 是 针对 这 个 问题 的 一 个 很 好 的 
解决 方案 。 通 过 Promise， 你 的 关注 点 放 在 各 个 步骤 上 ， 几 乎 没有 假定 链 的 继续 。 而 如 果 
使 用 序列 的 话 ， 情 况 则 正好 相反 : 会 假定 序列 持续 ， 会 有 更 多 的 步骤 无 限 地 附加 上 来 。 


当 考 虑 到 更 高 阶 的 Promise 模式 时 (在 race([..]) 和 all([..]) 之 上 )， 这 种 抽象 复杂 性 的 
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降低 就 格外 强大 了 。 


举例 来 说 ， 在 序列 当中 ， 你 可 能 想 要 表达 一 个 在 概念 上 类 似 try. .catch 的 步骤 ， 这 个 步 
又 总 是 返回 成 功 ， 要 么 是 想 要 的 主 功能 成 功 决议 ， 要 么 是 一 个 标识 被 捕获 错误 的 非 错误 信 
号 。 或 者 ， 你 可 能 想 要 表达 一 个 类 似 retry/until 的 循环 ， 其 中 会 持续 重复 试验 同样 的 步 
又 直到 成 功 为 止 。 


如 果 只 使 用 Promise 原 语 表达 的 话 ， 这 些 种 类 的 抽象 工作 量 可 并 不 小 ， 在 现 有 的 Promise 
链 当 中 实现 也 并 不 优美 。 但 是 ， 如 果 把 你 的 思路 抽象 为 序列 ， 并 把 步骤 当 作 对 Promise 的 
封装 ， 那 么 这 样 的 步骤 封装 就 可 以 隐藏 这 些 细 闻 ， 贡 省 你 的 精力 ， 从 而 让 你 以 最 合理 的 方 
式 考 虑 流程 控制 ， 不 需要 为 细 市 所 困 。 


第 二 ， 可 能 也 是 最 重要 的 一 点 ， 以 序列 中 的 步 又 这 样 的 视角 来 考量 异步 流程 控制 ， 这 样 就 
可 以 把 每 个 单独 步骤 涉及 的 异步 类 型 等 细 广 抽象 出 去 。 在 此 之 下 ， 总 是 由 Promise 来 控制 
着 这 个 步骤 ， 但 是 表面 上 ， 这 个 步 又 看 起 来 要 么 类 似 continuation 回调 (最 简单 的 默认 情 
况 )， 要 么 类 似 真正 的 Promise， 要 么 就 类 似 完整 运行 的 生成 器 ， 要 么 …… 和 希望 你 已 经 理解 
了 我 的 意思 。 


第 三 ， 序 列 很 容易 被 改造 ， 以 适应 不 同 的 思考 模式 ， 比 如 基于 事件 、 基 于 流 、 基 于 响应 的 
编码 。asynquence 提供 了 一 个 模式 ， 我 称 之 为 响应 序列 (reactive sequence， 后 面 会 介绍 )， 
是 RxJS (Reactive 扩展 ) 中 reactive observable 思想 的 一 个 变 体 。 它 利用 重复 的 事件 每 次 启 
动 一 个 新 的 序列 实例 。Promise 只 有 一 次 ， 所 以 单独 使 用 Promise 对 于 表达 重复 的 异步 是 很 
笨拙 的 。 


另外 ， 有 一 种 思路 在 一 个 被 我 称 为 可 选 代 序 列 的 模式 中 反 转 了 决议 和 控制 功能 。 不 再 是 每 
个 单独 的 步骤 在 内 部 控制 自己 的 完成 〈 于 是 有 序列 前 进 ) ， 事 实 上 ， 这 个 序列 被 反 转 了 ， 
前 进 控 制 是 通过 外 部 的 迭代 器 ， 并 且 可 送 代 序 列 中 的 每 个 步骤 只 响应 next(.…) 迭代 器 控 
制 。 

























































































本 附录 在 后 面 会 介绍 这 些 不 同 的 变 体 ， 所 以 不 必 担 心 刚才 的 讨论 过 于 简略 。 





需要 记 住 的 是 ， 对 复杂 异步 来 说 ， 比 起 只 用 Promise (Promise 链 ) 或 只 用 生成 器 ， 序 列 是 
更 强大 更 合理 的 抽象 。asynquence 的 设计 目标 就 是 在 合适 的 层级 表达 这 个 抽象 ， 使 异步 编 
程 更 容易 理解 、 更 有 乐趣 。 




















A.2 asynquence API 
首先 ， 创 建 序列 (一 个 asynquence 实例 ) 的 方法 是 通过 函数 AsQ(..)。 没 有 参数 的 AsQ() 
调用 会 创建 一 个 空 的 初始 序列 ， 而 向 AsQ(..) 函数 传递 一 个 或 多 个 值 ， 则 会 创建 一 个 序列 ， 
其 中 每 个 参数 表示 序列 中 的 一 个 初始 步 又 。 
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为 了 使 这 里 所 有 的 代码 示例 起 见 ， 我 将 在 全 局 浏览 器 使 用 asynquence 顶 
级 标识 符 : ASQ。 如 果 你 通过 模块 系统 (浏览 器 或 服务 器 ) 包含 并 使 用 
asynquence 的 话 ， 当 然 可 以 定义 任何 你 喜欢 的 符号 ，asynquence 不 会 在 意 ! 


























这 里 讨论 的 许多 API 方法 是 构建 在 asynquence 的 核心 库 中 的 ， 还 有 其 他 一 些 是 通过 包含 可 
选 的 contrib 插件 包 提 供 的 。 请 参考 asynquence 文档 (http://github.com/getify/asynquence)， 
确定 一 个 方法 是 内 建 的 还 是 通过 插件 定义 的 。 





A.2.1 步 台 


如 果 一 个 函数 表示 序列 中 的 一 个 普通 步骤 ， 那 调用 这 个 函数 时 第 一 个 参数 是 continuation 
回调 ， 所 有 后 续 的 参数 都 是 从 前 一 个 步骤 传递 过 来 的 消息 。 直 到 这 个 continuation 回调 被 
调用 后 ， 这 个 步骤 才 完 成 。 一 旦 它 被 调用 ， 传 给 它 的 所 有 参数 将 会 作为 消息 传人 序列 中 的 
下 一 个 步骤 。 


要 向 序列 中 添加 额外 的 普通 步 又， 可 以 调用 then(..) (这 本 质 上 和 AsQ(..) 调用 的 语义 完 
全 相同 ) : 


ASQ( 
// 步骤 1 
function(done){ 
setTimeout( function(){ 
done( "Hello" ); 
}, 100 ); 


}s 
// 步骤 2 
function(done,greeting) { 
setTimeout( function(){ 
done( greeting + " World" ); 
}, 100 ); 
} 


) 
// 步骤 3 
.then( function(done,msg){ 
setTimeout( function(){ 
done( msg.toUpperCase() ); 
}, 100 ); 
}) 
// 步骤 4 
.then( function(done,msg){ 
console.log( msg ); // HELLO WORLD 
}); 


尽管 then(..) 和 原生 Promise API 名 称 相 同 ， 但 是 这 个 then(..) 是 不 一 样 
的 。 你 可 以 向 then(..) 传递 任意 多 个 函数 或 值 ， 其 中 每 一 个 都 会 作为 一 个 独 
立 步 又 。 其 中 并 不 涉及 两 个 回调 的 完成 /拒绝 语义 。 
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和 Promise 不 同 的 一 点 是 : 在 Promise 中 ， 如 果 你 要 把 一 个 Promise 链接 到 下 一 个 ， 需 要 创 
建 这 个 Promise 并 通过 then(..) 完成 回调 函数 返回 这 个 Promise; 而 使 用 asynquence， 你 
需要 做 的 就 是 调用 continuation 回调 我 一 直 称 之 为 done()， 但 你 可 以 随便 给 它 取 什么 
名 字 一 一 并 可 选择 性 将 完成 消息 传递 给 它 作 为 参数 。 


通过 then(..) 定义 的 每 个 步骤 都 被 假定 为 异步 的 。 如 有 果 你 有 一 个 同步 的 步骤 ， 那 你 可 以 直 
接 调用 done(..)， 也 可 以 使 用 更 简单 的 步骤 辅助 函数 vaL(.…)。 


// 步骤 1( 同 步 ) 
ASQ( function(done){ 
done( "Hello" ); // 手工 同步 


}) 

// 步骤 2( 同 步 ) 

.VaL( function(greeting){ 
return greeting + " World"; 


}) 
// 步骤 3( 异 步 ) 
.then( function(done,msg){ 
setTimeout( function(){ 
done( msg.toUpperCase() ); 
}, 100 ); 























二 

// 步 又 4( 同 步 ) 

.VaL( function(msg){ 
console.log( msg ); 


} ); 


可 以 看 到 ， 通 过 val(..) 调用 的 步骤 并 不 接受 continuation 回调 ， 因 为 这 一 部 分 已 经 为 你 
假定 了 ， 结 有 果 就 是 参数 列表 没 那么 凑 乱 ! 如 有 果 要 给 下 一 个 步骤 发 送 消息 的 话 ， 只 需要 使 用 


return。 














可 以 把 val(.…) 看 作 一 个 表示 同步 的 “只 有 值 ”的 步骤 ， 可 以 用 于 同步 值 运 算 、 日 志 记录 
及 其 他 类 似 的 操作 。 














A.2.2 ”错误 
与 Promise 相 比 ，asynquence 一 个 重要 的 不 同 之 处 就 是 错误 处 理 。 

















通过 Promise， 链 中 每 个 独立 的 Promise (步骤 ) 都 可 以 有 自己 独立 的 错误 ， 接 下 来 的 每 
个 步骤 都 能 处 理 (或 者 不 处 理 ) 这 个 错误 。 这 个 语义 的 主要 原因 (再 次 ) 来 自 于 对 单独 
Promise 的 关注 而 不 是 将 链 (序列 ) 作为 整体 。 


我 相信 ， 多 数 时 候 ， 序 列 中 某 个 部 分 的 错误 通常 是 不 可 恢复 的 ， 所 以 序列 中 后 续 的 步骤 也 
就 没有 意义 了 ， 应 该 跳 过 。 因 此 ， 在 默认 情况 下 ， 一 个 序列 中 任何 一 个 步骤 出 错 都 会 把 整 
个 序列 抛 入 出 错 模式 中 ， 剩 余 的 普通 步骤 会 被 名 略 。 














一 、 
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如 果 你 确实 需要 一 个 错误 可 恢复 的 步骤 ， 有 几 种 不 同 的 API 方法 可 以 实现 ， 比 如 try(..) 
(前 面 作 为 一 种 try. .catch 步骤 提 到 过 ) 或 者 until(..) (一 个 重 试 循环 ， 会 尝试 步 又 直到 
成 功 或 者 你 手工 使 用 break())。asynquence 甚至 还 有 pThen(..) 和 pCatch(..) 方法 ， 它 们 
和 普通 的 Promise then(..) 和 catch(..) 的 工作 方式 完全 一 样 (参见 第 3 章 )。 因 此 ， 如 果 
你 愿意 的 话 ， 可 以 定制 序列 当中 的 错误 处 理 。 


关键 在 于 ， 你 有 两 种 选择 ， 但 根据 我 的 经 验 ， 更 常用 的 是 默认 的 那个 。 通 过 Promise， 为 
了 使 一 We 你 需要 小 心地 避免 在 任意 步骤 中 注册 拒绝 处 理 函 
数 。 否 则 的 话 ， 这 个 错误 就 会 因 被 当 作 已 经 处 理 的 而 被 吞 掉 ， 同 时 这 个 序列 可 能 会 继续 
(很 可 色 te ee 要 正确 可 靠 地 处 理 这 一 类 需求 有 点 棘手 。 


asynquence 为 注册 一 个 序列 错误 通知 处 理 函数 提供 了 一 个 or(..) 序列 方法 。 这 个 方法 还 有 
一 个 别名 ，onerror(..)。 你 可 以 在 序列 的 任何 地 方 调用 这 个 方法 ， 也 可 以 注册 任意 多 个 处 
时 函数。 这 很 容易 实现 多 个 不 同 的 消费 者 在 同一 个 序列 上 侦 听 ， 以 得 知 它 有 没有 失败 。 从 
这 个 角度 来 说 ， 它 有 点 类 似 错误 事件 处 理 函 数 。 


和 使 用 Promise 类 似 ， 所 有 的 JavaScript 异常 都 成 为 了 序列 错误 ， 或 者 你 也 可 以 编写 代码 
来 发 送 一 个 序列 错误 信和 号: 











I 











































































































Ne 



































var sq = ASQ( function(done){ 
setTimeout( function(){ 
// 为 序列 发 送出 错 信 号 
done.fail( "Oops" ); 
}, 100 ); 
a 
.then( function(done){ 
// 不 会 到 达 这 里 





.or( function(err){ 

console.log( err ); // 0ops 
于 二 
.then( function(done){ 

// 也 不 会 到 达 这 里 
}); 


// 之 后 

















sq.or( function(err){ 
console.log( err ); // Oops 
3 


asynquence 的 错误 处 理 和 原生 Promise 还 有 一 个 非常 重要 的 区 别 ， 就 是 默认 状态 下 未 处 理 
异常 的 行为 。 正 如 在 第 3 章 中 讨论 过 的 ， 没 有 注册 拒绝 处 理 函 数 的 被 拒绝 Promise 就 会 默 
默 地 持 有 〈 即 吞 掉 ) 这 个 错误 。 你 需要 记得 总 要 在 链 的 尾 端 添 加 一 个 最 后 的 catch(.. )。 


而 在 asynquence 中 ， 这 个 假定 是 相反 的 。 
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如 果 一 个 序列 中 发 生 了 错误 ， 并 且 此 时 没有 注册 错误 处 理 函 数 ， 那 这 个 错误 就 会 被 报告 到 
控制 台 。 换 名 话说， 未 处 理 的 拒绝 在 默认 情况 下 总 是 会 被 报告 ， 而 不 会 被 否 掉 和 错过 。 

一 旦 你 针对 某 个 序列 注册 了 错误 处 理 函 数 ， 这 个 序列 就 不 会 产生 这 样 的 报告 ， 从 而 避免 了 
重复 的 噪音 。 





实际 上 ， 可 能 在 一 些 情况 下 你 会 想 创建 一 个 序列 ， 这 个 序列 可 能 会 在 你 能 够 注册 处 理 函 数 
之 前 就 进入 了 出 错 状 态 。 这 不 常见 ， 但 偶尔 也 会 发 生 。 

在 这 样 的 情况 下 ， 你 可 以 选择 通过 对 这 个 序列 调用 defer() 来 避免 这 个 序列 实例 的 错误 报 
告 。 应 该 只 有 在 确保 你 最 终 会 处 理 这 种 错误 的 情况 下 才 选 择 关 闭 错误 报告 : 











var sql = ASQ( function(done){ 








doesnt .Exist(); // 将 会 向 终端 抛 出 异常 
} 3 
var sq2 = ASQ( function(done){ 

doesnt.Exist(); // 只 抛 出 一 个 序列 错误 
} 2 
// 显 式 避免 错误 报告 
.defer(); 


setTimeout( function(){ 
sq1.or( function(err){ 
console.log( err ); // ReferenceError 


小 .好 


sq2.or( function(err){ 
console.log( err ); // ReferenceError 
} ); 
}, 100 ); 


// ReferenceError (from sq1) 




















这 种 错误 处 理 方式 要 好 于 Promise 本 身 的 那 种 行为 ， 因 为 它 是 成 功 的 坑 ， 而 不 是 失败 陷阱 
(参见 第 3 章 )。 


如 果 向 一 个 序列 插入 (包括 了 ) 另外 一 个 序列 ， 参 见 A.2.5 节 中 的 完整 描述 ， 
那么 源 序列 就 会 关闭 错误 报告 ， 但 是 必须 要 考虑 现在 目标 序列 的 错误 报告 开 
美的 问题 。 








A.2.3 ”并行 步骤 

并 非 序 列 中 的 所 有 步骤 都 恰好 执行 一 个 (异步 ) 任务 。 序 列 中 的 一 个 步骤 中 如 果 有 多 个 子 
步骤 并 行 执 行 则 称 为 gate(..) (还 有 一 个 别名 aLL(..)， 如 果 你 愿意 用 的 话 )， 和 原生 的 
Promise.all([..]) 直接 对 应 。 
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如 果 gate(,…) 中 所 有 的 步 又 都 成 功 完成 ， 那 么 所 有 的 成 功 消息 都 会 传 给 下 一 个 序列 步骤 。 


如 果 它 们 中 有 任何 一 个 出 错 的 话 ， 整 个 序列 就 会 立即 进入 出 错 状态 。 
考虑 : 





ASQ( function(done){ 
setTimeout( done, 100 ); 


}) 
.gate( 
function(done){ 
setTimeout( function(){ 
done( "Hello" ); 
}, 100 ); 
] 
function(done){ 
setTimeout( function(){ 
done( "World", "!" ); 
}, 100 ); 
} 
) 


.val( function(msg1,msg2){ 
console.log( msg1 ); // Hello 
console.log( msg2 ); /A/a WORLD 
下 


出 于 展示 说 明 的 目的 ， 我 们 把 这 个 例子 与 原生 Promise 对 比 : 


new Promise( function(resolve,reject){ 
setTimeout( resolve, 100 ); 
有 
.then( function(){ 
return Promise.all( [ 
new Promise( function(resolve,reject){ 
setTimeout( function(){ 
resoLve( "Hello" ); 
}, 100 ); 
} )， 
new Promise( function(resolve,reject){ 
setTimeout( function(){ 
// 注 : 这 里 需要 一 个 [ ] 数 组 
resoLve( [ "World", "!" ] ); 
}, 100 ); 
}) 
11); 
}:) 
.then( function(msgs){ 
console.log( msgs[0] ); // Hello 
console.log( msgs[1] ); // [ "Wworld", "!" ] 
3 


Promise 用 来 表达 同样 的 异步 流程 控制 的 重复 样板 代码 的 开销 要 多 得 多 。 这 是 一 个 很 好 的 





展示 ， 说 明了 为 什么 asynquence 的 API 和 抽象 让 Promise 步骤 的 处 型 





E 轻 松 了 很 多 。 异 步 流 
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程 越 复杂 ， 改 进 就 会 越 明 显 。 


1. 步骤 的 变 体 


contrib 插件 中 提供 了 几 个 asynquence 的 gate(..) 步骤 类 型 的 变 体 ， 非 常 实用 。 





any(..) 类 似 于 gate(..)， 除 了 只 需要 一 个 子 步骤 最 终 成 功 就 可 以 使 得 整个 序列 前 进 。 
first(..) 类 似 于 any(..)， 除了 只 要 有 任何 步骤 成 功 ， 主 序列 就 会 前 进 (忽略 来 自 寺 
他 步骤 的 后 续 结 果 )。 

race(..) (对 应 Promise.race([..])) 类 似 于 first(..)， 除 了 只 要 任何 步骤 完成 (成 
功 或 失败 ) ， 主 序列 就 会 前 进 。 

last(..) 类 似 于 any(..)， 除 了 只 有 最 后 一 个 成 功 完成 的 步骤 会 将 其 消息 发 送 给 主 序 列 。 
none(..) 是 gate(..) 相反 : 只 有 所 有 的 子 步骤 失败 (所 有 的 步骤 出 错 消息 被 当 作成 功 
消息 发 送 ， 反 过 来 也 是 如 此 )， 主 序列 才 前 进 。 








-| 




















让 我 们 先 定义 一 些 辅助 函数 ， 以 便 更 清楚 地 进行 说 明 : 


function Success1(done) { 
setTimeout( function(){ 
done( 1 ); 
}, 100 ); 


function success2(done) { 
setTimeout( function(){ 
done( 2 ); 
}, 100 ); 
} 


function failure3(done) { 
setTimeout( function(){ 
done.fail( 3 ); 
}, 100 ); 


function output(msg) { 
console.log( msg ); 


. 


现在 来 说 明 这 些 gate(..) 步骤 变 体 的 用 法 : 


ASQ() .race( 
failure3, 
success1 
) 
.or( output ); // 3 


ASQ() .any( 
success1, 
failure3, 
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success2 
) 
.val( function(){ 
var args = [].slice.call( arguments ); 
console. log( 
args // [ 1, undefined, 2 ] 
); 
由 区 


ASQ() .fiLrst( 
failure3, 
success1, 
success2 
) 
.val( output ); 人 


ASQ() .Last( 
failure3, 
success1, 
success2 
) 
.val( output ); 小 2 


ASQ() .none( 


failure3 
) 
.val( output ) 1173 
.none( 
failure3 
success1 
) 
.or( output ); £4/ 1 


另外 一 个 步骤 变 体 是 map(..)， 它 使 你 能 够 异步 地 把 一 个 数组 的 元 素 映射 到 不 同 的 值 ， 然 
后 直到 所 有 映射 过 程 都 完成 ， 这 个 步 又 才能 继续 。map(..) 与 gatel(.….) 非常 相似 ， 除 了 它 
是 从 一 个 数组 而 不 是 从 独立 的 特定 函数 中 取得 初始 值 ， 而 且 这 也 是 因为 你 定义 了 一 个 回调 
国 数 来 处 理 每 个 值 ; 





function double(x,done) { 
setTimeout( function(){ 
done( x * 2 ); 
}, 100 ); 
} 


ASQ() .map( [1,2,3], double ) 
.val( output ); // [2,4,6] 


map(..) 的 参数 (数组 或 回调 ) 都 可 以 从 前 一 个 步骤 传人 的 消息 中 接收 : 


function plusOne(x,done) { 
setTimeout( function(){ 
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done( x+1); 


}, 100 ); 
} 
ASQ( [1,2,3] ) 
.map( double ) // 消息 [1,2,3] 传 入 
.map( pLusone ) // 消息 [2,4,6] 传 入 
.VaL( output ); 5 


另外 一 个 变 体 是 waterfall(..)， 这 有 点 类 似 于 gate(..) 的 消息 收集 特性 和 then(..) 的 顺 
序 处 理 特性 的 混合 。 


首先 执行 步骤 1， 然 后 步骤 1 的 成 功 消息 发 送 给 步 又 2， 然后 两 个 成 功 消息 发 送 给 步骤 3， 
然后 三 个 成 功 消息 都 到 达 步 双 4， 以 此 类 推 。 这 样 ， 在 某 种 程度 上 ， 这 些 消 息 集结 和 层 倒 
下 来 就 构成 了 “瀑布 ”(waterfall) 。 


考虑 : 





function double(done) { 
var args = [].slice.call( arguments, 1 ); 
console.log( args ); 


setTimeout( function(){ 
done( args[args.length - 1] * 2 ); 
}, 100 ); 
} 


ASQ( 3 ) 

.waterfall( 
double, KK 
double, //[ 
double, ye 
double // [ 


) 
.val(l function(){ 
var args = [l].slice.call( arguments ); 
console.log( args ); // [ 6, 12, 24, 48 ] 
} ); 


如 果 “ 课 布 ” 中 的 任何 一 点 出 错 ， 整 个 序列 就 会 立即 进入 出 错 状态 。 


2. 容错 
有 时 候 可 能 需要 在 步骤 级 别 上 管理 错误 ， 不 让 它们 把 整个 序列 带 入 出 错 状 态 。 为 了 这 个 目 
的 ，asynquence 提供 了 两 个 步骤 变 体 。 


try(..) 会 试验 执行 一 个 步骤 ， 如 果 成 功 的 话 ， 这 个 序列 就 和 通常 一 样 继续 。 如 果 这 个 步 


又 失败 的 话 ， 失 败 就 会 被 转化 为 一 个 成 功 消 息 ， 格 式 化 为 { catch: .. } 的 形式 ， 用 出 错 
消息 填充 : 
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ASQ() 


.try( success1 ) 


.VaL( output ) //1 
.try( failure3 ) 
.val( output ) // { catch: 3 } 


.or( function(err){ 
// 永远 不 会 到 达 这 里 
Ee 
也 可 以 使 用 untitl(..) 建立 一 个 重 试 循 环 ， 它 会 试 着 执行 这 个 步骤 ， 如 果 失 败 的 话 就 会 在 
下 一 个 事件 循环 tick 重 试 这 个 步 又 ， 以 此 类 推 。 


这 个 重 试 循环 可 以 无 限 继续 ， 但 如 果 想 要 从 循环 中 退出 的 话 ， 可 以 在 完成 触发 函数 中 调用 
标志 break()， 触 发 函数 会 使 主 序列 进入 出 错 状态 : 




















Var count = 0; 


ASQ( 3 ) 
.unNtil( double ) 
.val( output ) // 6 
.UntiL( function(done){ 
COUnt++; 


setTimeout( function(){ 
if (count < 5) { 
done.fail(); 
} 
else { 
// 跳出 until(..) 重 试 循 环 
done.break( "Oops" ); 
} 
}, 100 ); 
下 
.or( output ); // Oops 








3. Promise 风格 的 步骤 
如 果 你 喜欢 在 序列 使 用 类 似 于 Promise 的 then(..) 和 catch(..) (参见 第 3 章 ) 的 Promise 
风格 语义 ， 可 以 使 用 pThen 和 pCatch 插件 : 


ASQ( 21 ) 

.pThen( function(msg){ 
return msg * 2; 

} 3 

.pThen( output ) /1/42 

.pThen( function(){ 
// 抛 出 异常 
doesnt.Exist(); 

二 

.pCatch( function(err){ 
// 捕获 异常 (拒绝 ) 


console.log( err ); // ReferenceError 
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}) 
.val(l function(){ 














// 主 序列 以 成 功 状态 返回 ， 
// > pCatch(.. ) 捕 获 了 
} ); 
pThen(..) 和 pCatch(..) 是 设计 用 来 运行 在 序列 中 的 ， 但 其 行为 方式 就 像 是 在 一 个 普通 


的 Promise 链 中 。 因 此 ， 可 以 从 传 给 pThen(.. 


asynquence 序列 (参见 第 3 章 )。 


A.2.4 ”序列 分 又 


关于 Promise， 有 一 个 可 能 会 非常 有 用 的 特性 ， 那 就 是 可 以 附加 多 个 thenl.. 
在 这 个 promise 处 有 效 地 实现 了 分 又 流程 控制 ; 


册 到 同一 个 promise; 





var p = Promise.resolve( 21 ); 


/ 分 又 1( 来 自 p) 
p.then( function(msg){ 
return msg * 2; 

小 
.then( function(msg){ 




















console.log( msg ); // 42 
}) 
// 分 又 2 (来 自 p) 
p.then( function(msg){ 
console.log( msg ); /1 24 


上 





var sq = ASQ(..).then(..).then(. 


var sq2 = sq.fork(); 


// 分 又 1 


sq.then(..)..; 


// 分 又 2 


sq2.then(..)..; 


A.2.5 合并 序列 

















如 果 要 实现 fork() 的 逆 操 作 ， 可 以 使 用 实例 方法 seq(.. 


列 来 合并 这 两 个 序列 : 


var sq = ASQ( function(done){ 
setTimeout( function(){ 


在 asynquence 里 可 使 用 fork() 实现 同 梓 


) 的 完成 处 理 国 数 决议 真正 的 Promise 或 


) 处 理 函 数 注 


的 分 又 ， 





0 


)， 通 过 把 一 个 序列 归 入 另 一 个 序 
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done( "Hello World" ); 
}, 200 ); 
}); 


ASQ( function(done){ 
setTimeout( done, 100 ); 
}) 
// 将 sq 序列 纳入 这 个 序列 
.seq( sq ) 
.val( function(msg){ 
console.log( msg ); // Hello World 
}) 


正如 这 里 展示 的 ，seq(….) 可 以 接受 一 个 序列 本 身 ， 或 者 一 个 函数 。 如 果 它 接收 一 个 函数 ， 
那么 就 要 求 这 个 函数 被 调用 时 会 返回 一 个 序列 。 因 此 ， 前 面 的 代码 可 以 这 样 实现 : 




















Lbs 

.Seq( function(){ 
return sq; 

}) 

Ls 


这 个 步骤 也 可 以 通过 pipe(..) 来 完成 : 


/a 

.then( function(done){ 
// 把 sq 加 入 done continuation 回 调 
sq.pipe( done ); 

上 

人 


如 果 一 个 序列 被 包含， 那么 它 的 成 功 消 息 流 和 出 错 流 都 会 输入 进来 。 





正如 前 面 的 注解 所 提 到 的 ,管道 化 (使 用 pipe(..) 手工 实现 的 或 通过 seq(.…) 
自动 进行 的 ) 会 关闭 源 序列 的 错误 报告 ， 但 不 会 影响 目标 序列 的 错误 报告 。 








A.3 值 与 错误 序列 
如 果 序 列 的 某 个 步骤 只 是 一 个 普通 的 值 ， 这 个 值 就 映射 为 这 个 步骤 的 完成 消息 : 
var sq = ASQ( 42 ); 
sq.val( function(msg){ 
console.log( msg ); // 42 


下 六 
如 果 你 想 要 构建 一 个 自动 出 错 的 序列 : 
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var sq = ASQ.failed( "0ops" ); 


ASQ() 
.Seq( sq ) 
.val(l function(msg){ 
// 不 会 到 达 这 里 
}) 
.or( function(err){ 
console.log( err ); // 0ops 
} ); 





也 有 可 能 你 想 自动 创建 一 个 延 时 值 或 者 延 时 出 错 的 序列 。 使 用 contrib 插件 after 和 
failAfter ， 很 容易 实现 : 








var Sql = ASQ.after( 100, "Hello", "World" ); 
var sq2 = ASQ.failAfter( 100, "Oops" ); 


sql.val( function(msg1,msg2){ 
console.log( msg1l, msg2 ); // Hello World 
} ); 


sq2.or( function(err){ 
console.log( err ); // 0ops 
于 


也 可 以 使 用 after(..) 在 序列 中 插入 一 个 延 时 : 


ASQ( 42 ) 


// 在 序列 中 插入 一 个 延 时 
.after( 100 ) 


.val(l function(msg){ 
console.log( msg ); // 42 
} ); 


A.4 Promise 与 回调 


我 认为 asynquence 序列 在 原生 Promise 之 上 提供 了 很 多 新 的 价值 。 多 数 情况 下 ， 你 都 会 
发 现在 这 一 抽象 层次 上 工作 是 非常 令 人 愉快 和 强大 的 。 不 过 ， 把 asynquence 与 其 他 非 
asynquence 代码 集成 也 是 可 以 实现 的 。 


























通过 实例 方法 promise(..) 很 容易 把 一 个 promise (比如 一 个 thenable， 参 见 第 3 章 ) 归 入 
到 一 个 序列 中 : 





var p = Promise.resolve( 42 ); 


ASQ() 
.promise( p ) // 也 可 以 : function(){ return p; } 
.val(l function(msg){ 
console.log( msg ); // 42 
} ); 
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要 实现 相反 的 操作 以 及 从 一 个 序列 中 的 某 个 步骤 分 又 / 剔 出 一 个 promise， 可 以 通过 contrib 


插件 toPromise 实现 : 








var sq = ASQ.after( 100, "Hello World" ); 


sq.topromise() 
// 现在 这 是 一 个 标准 promise 链 
.then( Fo Ont ne A 
return msg.toUpperCasel(); 
下 
.then( function(msg){ 
console.log( msg ); // HELLO WORLD 
}); 














有 几 个 辅助 工具 可 以 让 asynquence 与 使 用 回调 的 系统 适 配 。 要 从 序列 中 自动 生成 一 个 


error-first 风格 回调 以 连 入 到 面向 回调 的 工具 ， 可 以 使 用 errfcb: 








var sq = ASQ( function(done){ 
// 注 : 期 望 "error-first 风 格 " 回 调 
someAsyncFuncWithCB( 1, 2, done.errfcb ) 
}) 
.val( function(msg){ 
/1 二 
}) 
.or( function(err){ 
1 
】 ); 





// 注 :期 望 "error-first 风 格 "回调 
anotherAsyncFuncWithCB( 1, 2, sq.errfcb() ); 








你 还 可 能 想 要 为 某 个 工具 创建 一 个 序列 封装 的 版 本 ， 类 似 于 第 
的 thunkory，asynquence 为 此 提供 了 ASQ.wrap(..): 


var coolUtility = ASQ.wrap( someAsyncFuncWithCB ); 


coolUtility( 1, 2 ) 

.val( function(msg){ 
A 

} 

.or( function(err){ 
fs 

}); 





3 章 的 promisory 和 第 4 章 








为 了 清晰 起 见 (也 是 为 了 好 玩 ! )， 我 们 再 来 发 明 一 个 术语 ， 用 于 表达 来 
自 AsQ.wrap(.…) 的 生成 序列 的 函数 ， 就 像 这 里 的 cootutility。 我 建议 使 用 











sequory (Sequence+factory ) 。 
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A.5 可 和 迭代 序列 


序列 的 一 般 范 式 是 每 个 步骤 负责 完成 它 自己 ， 这 也 是 使 序列 前 进 的 原 
方式 也 是 相同 的 。 


不 幸 的 是 ， 有 时 候 需 要 实现 对 Promise 或 步骤 的 外 部 控制 ， 这 会 导 
extraction 问题 。 


考虑 这 个 Promise 例子 : 


var domready = new Promise( function(resolve,reject){ 
// 不 需 把 这 个 放 在 这 里 ,因为 逻辑 上 这 属于 另 一 部 分 代码 
document.addEventListener( "DOMContentLoaded", resolve ); 


a 
人 























domready.then( function(){ 
// DOM 就 绪 ! 
3 


使 用 Promise 的 capability extraction 反 模 式 看 起 来 类 似 如 下 : 

var ready; 

var domready = new Promise( function(resolve,reject){ 
// 提取 resolve() 功 能 
ready = resolve; 

上 

// .， 

domready.then( function(){ 
// DOM 就绪! 

}); 

//.. 


document.addEventListener( "DOMContentLoaded", ready ); 


由 ， 我 不 大明 了 。 








因 。Promise 的 工作 


致 棘手 的 capability 





依 我 看 来 ， 这 个 反 模 式 有 奇怪 的 代码 味 ， 但 很 多 开发 者 喜欢 这 样 做 ， 个 中 缘 


asynquence 提供 了 一 个 反 转 的 序列 类 型 ， 我 称 之 为 可 选 代 序列 ， 它 把 控制 能 力 外 部 化 了 


(对 于 像 domready 这 样 的 用 例 非 常 有 用 ) : 
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// 注 : 这 里 的 domready 是 一 个 控制 这 个 序列 的 迭代 器 
var domready = ASQ.iterable(); 


A 

domready.val( function(){ 
// _ DOM 就 绪 

3 
// .， 


document .addEventListener( "DOMContentLoaded" ，domready .next ); 











可 选 代 序 列 的 使 用 场景 不 只 是 这 里 看 到 的 这 个 ， 我 们 将 在 附录 B 中 再 次 介绍 。 


一 /一 2 
A.6 运行 生成 器 
在 第 4 章 中 我 们 推导 出 了 一 个 名 为 run(..) 的 工具 。 这 个 工具 可 以 运行 生成 器 到 结束 ， 侦 
听 yield 出 来 的 Promise， 并 使 用 它们 来 异步 恢复 生成 器 。asynquence 也 内 建 有 这 样 的 工 
具 ， 叫 作 runner(..)。 

















为 了 展示 ， 我 们 首先 构建 一 些 辅 助 函 数 : 


function doubLePr(x) { 
return new Promise( function(resolve,reject){ 
setTimeout( function(){ 
resolve( x * 2 ); 
}, 100 ); 
} 
} 


function doubleSeq(x) { 
return ASQ( function(done){ 
setTimeout( function(){ 
done( x * 2) 
}, 100 ); 
}); 
} 


现在 ， 可 以 使 用 runner(..) 作为 序列 中 的 一 个 步骤 : 
ASQ( 10, 11 ) 
.runner( function*(token){ 


var x = token.messages[0] + token.messages[1]; 


// yield 一 个 真正 的 promise 
x = yield doublePr( x ); 





// yield 一 个 序列 
x = yield doubleSeq( x ); 
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return x; 


}) 
.val(l function(msg)t{ 
console.log( msg ); // 84 


je 


封装 的 生成 器 
你 也 可 以 创建 一 个 自封 装 的 生成 器 ， 也 就 是 说 ， 通 过 AsQ.wrap(.…) 包装 实现 一 个 运行 指定 
生成 器 的 普通 函数 ， 完 成 后 返回 一 个 序列 ; 


var foo = ASQ.wrap( function*(token){ 
var x = token.messages[0] + token.messages[1]; 


// yield 一 个 真正 的 promise 
x = yield doublePr( x ); 


// yield 一 个 序列 
x = yield doubleSeq( x ); 


return x; 
}, { gen: true } ); 


A 
foo( 8, 9 ) 
.val(l function(msg){ 


console.log( msg ); // 68 
下 


runner(..) 还 可 以 实现 更 多 很 强大 的 功能 ， 我 们 将 在 附录 B 中 深入 介绍 。 





A.7 小 结 


asynquence 是 一 个 建立 在 Promise 之 上 的 简单 抽象 ， 序列 就 是 一 系列 (异步) 步骤 ， 
目标 在 于 简化 各 种 异步 模式 的 使 用 ， 而 不 失 其 功能 。 


除了 我 们 在 本 附录 中 介绍 的 ，asynquence 核心 API 及 其 contrib 插件 中 还 有 很 多 好 东西 ， 但 
我 们 将 把 对 其 余 功 能 的 探索 作为 一 个 练习 留 给 你 。 


现在 ， 你 已 经 看 到 了 asynquence 的 本 质 与 灵 瑰 。 关 键 点 是 一 个 序列 由 步骤 组 成 ,这些 步 
又 可 以 是 Promise 的 数 十 种 变 体 的 任何 一 种 ， 也 可 以 是 通过 生成 器 运行 的 ， 或 者 是 其 他 什 
么 …… 决 策 权 在 于 你 ， 你 可 以 自由 选择 适合 任务 的 异步 流程 控制 逻辑 编织 起 来 。 使 用 不 同 
的 异步 模式 不 再 需要 切换 不 同 的 库 。 


如 果 你 已 经 理解 了 这 些 代 码 片 段 的 意义 ， 现 在 就 可 以 快速 学 习 这 个 库 了 。 实 际 上 ， 学 习 它 
并 不 需要 耗费 多 少 精力 ! 
























































asynquence 库 | 337 


如 果 对 它 的 工作 方式 (或 原型 
例子 ， 熟 悉 一 下 asynquence 外 

















E) 还 有 点 迷糊 的 话 ， 你 可 能 需要 再 花 点 时 间 查 看 一 下 前 

















的 使 用 ， 然 后 再 进行 附录 B 的 学 习 。 在 附录 B 中 ， 我 们 六 





用 asynquence 实现 几 种 更 高 级 更 强大 的 异步 模式 。 
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附录 A 


附录 B 


高 级 异步 模式 





路 





附录 A 介绍 了 面向 序列 的 异步 流程 控制 库 asynquence， 它 主要 基于 Promise 和 生成 器 。 


现在 ， 我 们 将 要 探索 构建 在 已 有 理解 和 功能 之 上 的 其 他 高 级 异步 模式 ， 并 了 解 asynquence 
如 何 让 这 些 高 级 异步 技术 在 我 们 的 程序 中 更 易于 混用 和 匹配 而 无 需 分 立 的 多 个 库 。 


B.1 可 和 迭代 序列 


附录 A 介绍 过 asynquence 的 可 迭代 序列 ， 这 里 我 们 打算 更 深入 地 再 次 探讨 一 下 相关 内 容 。 

















回忆 一 下 : 
var domready = ASQ.iterable(); 
//.. 
domready.val( function(){ 
// DOM 就 绪 
}); 
// .， 


document .addEventListener( "DOMContentLoaded", domready.next ); 


现在 ， 让 我 们 把 一 个 多 步 又 序列 定义 为 可 迭代 序列 : 





var steps = ASQ.iterable(); 
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steps 
.then( function STEP1(x){ 
return x * 2; 


}) 
.Steps( function STEP2(x){ 
return x + 3; 


}) 
.Steps( function STEP3(x){ 
return x * 4; 


Ps 


steps.next( 8 ).vaLue; // 16 
steps.next( 16 ).vaLue; // 19 
steps.next( 19 ).vaLue; // 76 
steps.next().done; // true 


可 以 看 到 ， 可 进 代 序 列 是 一 个 符合 标准 的 运 代 器 (参见 第 4 章 )。 因 此 ， 可 通过 ES6 的 
for..of 循环 运 代 ， 就 像 生成 器 (或 其 他 任何 iterable) 一 样 : 











var steps = ASQ.iterable(); 


steps 

.then( function STEP1(){ return 2 

.then( function STEP2(){ return 4 

.then( function STEP3(){ return 6; 
8: 
4 


~ 
EH 
i 


.then( function STEP4(){ return 


.then( function STEP5(){ return 10; } ); 


for (var v of steps) { 
console.log( v ); 


} 
//246810 


除了 附录 A 中 的 事件 触发 示例 之 外 ， 可 迭代 序列 的 有 趣 之 处 在 于 它们 从 本 质 上 可 以 看 作 是 
一 个 生成 器 或 Promise 链 的 末 身 ， 但 其 灵活 性 却 更 高 。 

请 考虑 一 个 多 Ajax 请 求 的 例子 。 我 们 在 第 3 章 和 第 4 章 中 已 经 看 到 过 同样 的 场景 ， 分 别 
通过 Promise 链 和 生成 器 实现 的 。 用 可 迭代 序列 来 表达 : 











// 支持 序列 的 ajax 


var request = ASQ.wrap( ajax ); 





ASQ( "http://some.url.1" ) 
.runner( 
ASQ.iterable() 


.then( function STEP1(token){ 
var UrL = token.messages[0]; 
return request( url ); 


Ji 


.then( function STEP2(resp){ 





340 | 附录 B 


return ASQ().gate( 
request( "http://some.uUrL.2/?v=" + resp )， 
request( "http://some.url.3/?v=" + resp ) 
); 
J 


.then( function STEP3(r1,r2){ return r1 + r2; } ) 
) 


.vall function(msg){ 
console.log( msg ); 


二 六 
可 迭代 序列 表达 了 一 系列 顺序 的 〈 同 步 或 异步 的 ) 步骤 ， 看 起 来 和 Promise 链 非 常 相似 。 
换 名 话说 ， 它 比 直接 的 回调 肯 套 看 起 来 要 简 千 得 多 ， 但 没有 生成 器 的 基于 yield 的 顺序 语 
法 那么 好 。 











但 我 们 把 可 返 代 序 列传 人 了 AsQ#runner(.:)， 这 个 国 数 会 把 该 序列 执行 完 坐 ， 就 像 对 待 生 
成 器 那样 。 可 和 迭代 序列 本 质 上 和 生成 器 的 行为 方式 一 样 。 这 个 事实 值得 注意 ， 原 因 如 下 。 








首先 ， 可 返 代 序 列 是 ES6 生成 器 某 个 子 集 的 革 种 前 ES6 等 价 物 。 也 就 是 说 ， 你 可 以 直接 编 
写 它 们 (在 任意 环境 运行 )， 或 者 你 也 可 以 编写 ES6 生成 器 ， 并 将 其 重 编译 或 转化 为 可 迭 
代 序 列 〈 就 此 而 言 ， 也 可 以 是 Promise 链 ! )。 














把 “异步 完整 运行 ”的 生成 器 看 作 是 Promise 链 的 语法 糖 ， 对 于 认识 它们 的 同 构 关系 是 很 
重要 的 。 


在 继续 之 前 ， 我 们 应 该 注意 到 ， 前 面 的 代码 片段 可 以 用 asynquence 重 写 如 下 : 


[hail 











人 














ASQ( "http://some.url.1" ) 
.Seq( /*STEP 1*/ request ) 
.Seq( function STEP2(resp){ 
return ASQ().gate( 
request( "http://some.url.2/?v=" + resp )， 
request( "http://some.url.3/?v=" + resp ) 
); 
}) 
.val( function STEP3(r1,r2){ return r1 + r2; } ) 
.val( function(msg){ 
console.log( msg ); 


0); 
而 且 ， 步骤 2 也 可 以 这 样 写 : 


.gate( 
function STEP2a(done,resp) { 
request( "http://some.url.2/?v=" + resp ) 
.pipe( done ); 


function STEP2b(done,resp) { 
request( "http://some.url.3/?v=" + resp ) 
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.pipe( done ); 
} 
) 


那么 ， 如 果 更 简单 平 几 的 asynquence 链 就 可 以 做 得 很 好 的 话 ， 为 什么 还 要 辛苦 地 把 我 们 的 
流程 控制 表达 为 ASQ#runner(..) 步骤 中 的 可 迭代 序列 呢 ? 





因为 可 迭代 序列 形式 还 有 很 重要 的 秘密 ， 提 供 了 更 强大 的 功能 。 请 继续 阅读 。 


可 和 迭代 序列 扩展 


生成 器 、 普 通 asynquence 序列 以 及 Promise 链 都 是 及 早 求 值 (eagerly evaluated) 
最 初 的 流程 控制 是 什么 ， 都 会 执行 这 个 固定 的 流程 。 





不 管 





然而 ， 可 迭代 序列 是 情 性 来 值 (lazily evaluated) ， 这 意味 着 在 可 迭代 序列 的 执行 过 程 中 ， 
如 果 需 要 的 话 可 以 用 更 多 的 步骤 扩展 这 个 序列 。 








只 能 在 可 迭代 序列 的 末尾 添加 步骤 ， 不 能 插入 序列 的 中 间 。 


首先 ， 让 我 们 通过 一 个 简单 点 的 (同步 ) 例子 来 熟悉 一 下 这 个 功能 : 


function double(x) { 
,2 


// 应 该 继续 扩展 吗 ? 

if (x < 500) { 
isq.then( double ); 

} 


return x; 


} 


// 建立 单 步 迭 代 序 列 
var isq = ASQ.iterable().then( double ); 





for (var v = 10, ret; 

(ret = isq.next( v )) && !ret.done; 
pi 

Vv = ret.value; 

console.log( v ); 


} 


一 开始 这 个 可 返 代 序列 只 定义 了 一 个 步骤 〈isq.then(doubtLe)) ， 但 这 个 可 迭代 序列 在 某 种 
条 件 下 (x < 560) 会 持续 扩展 自己 。 严 格 说 来 ，asynquence 序列 和 Promise 链 也 可 以 实现 
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类 似 的 功能 ， 不 过 我 们 很 快 将 说 明 为 什么 它们 的 能 力 是 不 足 的 。 


尽管 这 个 例子 很 平常 ， 也 可 以 通过 一 个 生成 器 中 的 while 循环 表达 ， 但 我 们 会 考虑 到 更 复 
杂 的 情况 。 


举例 来 说 ， 可 以 查看 Ajax 请 求 的 响应 ， 如 果 它 指出 还 需要 更 多 的 数据 ， 就 有 条 件 地 向 可 
迭代 序列 中 插入 更 多 的 步骤 来 发 出 更 多 的 请 求 。 或 者 你 也 可 以 有 条 件 地 在 Ajax 处 理 结 尾 
处 增加 一 个 值 格式 化 的 步骤 。 


考虑 : 

















var steps = ASQ.iterable() 


.then( function STEP1(token){ 
var url = token.messages[0].url; 


// 提供 了 额外 的 格式 化 步骤 了 吗 ? 
if (token.messages[0].format) { 
steps.then( token.messages[0].format ); 


3 


return request( url ); 


}) 


.then( function STEP2(resp){ 
// 向 区 列 中 添加 一 个 Ajax 请 求 吗 ? 
if (/x1/ .test( resp )) { 
steps.then( function STEP5(text){ 
return request( 
"http://some.url.4/?v=" + text 








下 
} 


return ASQ().gate( 
request( "http://some.url.2/?v=" + resp )， 
request( "http://some.url.3/?v=" + resp ) 
); 
}) 


.then( function STEP3(r1,r2){ return ri + r2; } ); 
你 可 以 看 到 ， 在 两 个 不 同 的 位 置 处 ,我 们 有 条 件 地 使 用 steps.then(..) 扩展 了 steps。 要 


运行 这 个 可 返 代 序列 steps， 只 需要 通过 ASQ#runner(..) 把 它 链 入 我 们 的 带 有 asynquence 
序列 (这 里 称 为 main) 的 主 程序 流程 : 














var main = ASQ( { 
url: "http://some.url.1", 
format: function STEP4(text){ 
return text.toUpperCase(); 


3} 
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于 

.runner( steps ) 

.VaL( function(msg){ 
console.log( msg ); 


了 


可 和 迭代 序列 steps 的 这 一 灵活 性 (有 条 件 行为 ) 可 以 用 生成 器 表达 吗 ? 算是 可 以 吧 ， 但 我 
们 不 得 不 以 一 种 有 点 笨拙 的 方式 重新 安排 这 个 逻辑 : 











function *steps(token) { 


// 步骤 1 


var resp = yield request( token.messages[0].url ); 


// 步骤 2 

var rvals = yield ASQ().gate( 
request( "http://some.uyrl.2/?v=" + resp )， 
request( "http://some.url.3/?v=" + resp ) 


); 
// 步骤 3 


var text = rvals[0] + rvals[1]; 


// 步骤 4 
// 提 供 了 额外 的 格式 化 步骤 了 吗 ? 
if (token.messages[0].format) { 
text = yield token.messages[0].format( text ); 


} 


// 步骤 5 
// 需要 向 序列 中 再 添加 一 个 Ajax 请 求 吗 ? 
if (/foobar/.test( resp )) { 
text = yield request( 
"http://some.url.4/?v=" + text 




















); 
} 


return text; 


} 

// 注意 :*steps() 可 以 和 前 面 的 steps 一 样 被 同一 个 ASQ 序 列 运行 
除了 已 经 确认 的 生成 器 的 顺序 、 看 似 同 步 的 语法 的 好 处 (参见 第 4 章 )， 要 模拟 可 扩展 可 
返 代 序列 steps 的 动态 特性 ，steps 的 逻辑 也 需要 以 *steps() 生成 器 形式 重新 安排 。 
而 如 果 要 通过 Promise 或 序列 来 实现 这 个 功能 会 怎样 呢 ? 你 可 以 这 么 做 ; 

var steps = something( .. ) 

.then( .. ) 

.then( function(..){ 


//.. 


// 扩展 链 是 吧 ? 
steps = steps.then( .. ); 
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刀 
}) 
.then( .. ); 











其 中 的 问题 捕捉 起 来 比较 微妙 ， 但 是 很 重要 。 所 以 ， 考 虑 要 把 我 们 的 steps Promise 链 链 入 
主 程序 流程 。 这 次 使 用 Promise 来 表达 ， 而 不 是 asynquence: 











var main = Promise.resolve( { 
url: "http://some.url.1", 
format: function STEP4(text){ 
return text.toUpperCase(); 
} 
| 
.then( function(..){ 
return steps; // hintl 
}) 
.val(l function(msg){ 
console.log( msg ); 


下 
现在 能 看 出 问题 所 在 了 吗 ? 仔细 观察 ! 


序列 步骤 排序 有 一 个 竞 态 条 件 。 在 你 返回 steps 的 时 候 ，steps 这 时 可 能 是 之 前 定义 的 
Promise 链 ， 也 可 能 是 现在 通过 steps = steps.then(..) 调用 指向 扩展 后 的 Promise 链 。 根 
据 执行 顺序 的 不 同 ， 结 果 可 能 不 同 。 























以 下 是 两 个 可 能 的 结果 。 

















。 如 果 steps 仍然 是 原来 的 Promise 链 ， 一 旦 之 后 它 通过 steps = steps.then(..) 被 “ 扩 
展 ”， 在 链 结 尾 处 扩展 之 后 的 promise 就 不 会 被 nain 流程 邯 虚 ， 因 为 它 已 经 连 到 了 
steps 链 。 很 遗憾 ， 这 就 是 及 早 求 值 的 局 限 性 。 

。 如 果 steps 已 经 是 扩展 后 的 Promise 链 ， 它 就 会 按 预 期 工作 ， 因 为 main 连接 的 是 扩展 后 


的 promise。 


除了 竞 态 条 件 这 个 无 法 接受 的 事实 ， 第 一 种 情况 也 需要 担心 ， 它 展示 了 Promise 链 的 及 时 
求 值 。 与 之 对 比 的 是 ， 我 们 很 容易 扩展 可 迭代 序列 ， 且 不 会 有 这 样 的 问题 ， 因 为 可 迭代 序 
列 是 情 性 来 值 的 。 


你 所 需 的 流程 控制 的 动态 性 越 强 ， 可 友人 代 序列 的 优势 就 越 明 显 。 





在 asynquence 网 站 上 可 以 得 到 关于 可 迭代 序列 的 更 多 信息 和 示例 (https:/ 
github.com/getify/asynquence/blob/master/README.md#iterable-sequences ) 。 
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B.2 事件 响应 


(至 少 ) 根据 第 3 章 的 内 容 ， 有 一 点 应 该 是 显而易见 的 ，Promise 是 异步 工具 箱 中 一 个 非常 
强大 的 工具 。 但 是 ， 因 为 Promise 只 能 决议 一 次 ， 它 们 的 功能 有 一 个 很 明显 的 缺憾 就 是 处 
里 事件 流 的 能 力 。 坦 白地 说 ， 简 单 asynquence 序列 恰巧 也 有 同样 的 弱点 。 




















De 











芳 虐 这样 一 个 场景 ， 你 想 要 在 每 次 某 个 事件 触发 时 都 启动 一 系列 步骤 。 单 个 Promise 或 
序列 不 能 代表 一 个 事件 的 所 有 发 生 。 因 此 ， 你 不 得 不 在 每 次 事件 发 生 时 创建 一 整个 新 的 
Promise 链 (或 序列 )， 就 像 这 样 : 




















listener.on( "foobar", function(data){ 


// 构造 一 个 新 的 事件 处 理 promise 链 


new Promise( function(resolve,reject){ 


// 
} 3 
.then( ) 
then( ) 
】 ); 


这 个 方法 展示 了 我 们 需要 的 基本 功能 ， 但 是 离 想 要 的 表达 期 望 逻辑 的 方式 还 差 得 很 远 。 这 
个 范式 中 合并 了 两 个 独立 的 功能 : 事件 侦 听 和 事件 响应 。 独 立 的 需求 要 求 把 这 两 个 功能 独 
立 开 来 。 

细心 的 人 可 能 会 观察 到 ， 这 个 问题 和 第 2 章 中 详细 介绍 的 回调 的 问题 类 似 。 这 是 某 种 程度 
的 控制 反 转 问题 。 


设想 一 下 ， 把 这 个 范式 的 反 转 恢复 一 下 ， 就 像 这 样 : 





var observable = listener.on( "foobar" ); 


// 将 来 
observable 
.then( .. ) 
.then( .. ); 
// 还 有 
observable 
.then( .. ) 
.then( .. ); 


值 observable 并 不 完全 是 一 个 Promise， 但 你 可 以 像 查看 Promise 一 样 查看 它 ， 所 以 它们 
是 紧密 相关 的 。 实 际 上 ， 它 可 以 被 查看 多 次 ， 并 且 每 次 它 的 事件 〈"foobar") 发 生 的 时 个 
都 会 发 出 通知 。 
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我 刚刚 展示 的 这 个 模式 是 响应 式 编程 (RP) 概念 和 动机 的 极 大 简化 ， 这 种 模 
式 已 经 被 几 个 伟大 的 项 目 和 语言 实现 /说明 了。RP 的 一 个 变 体 是 函数 式 响应 
式 编程 (FRP)， 这 是 指 对 数据 流 应 用 函数 式 编程 技术 (不 可 变性 、 引 用 完整 
性 ， 等 等 )。“ 响 应 式 ” 是 指 把 功能 在 时 间 上 扩散 以 响应 事件 。 如 果 感 兴趣 的 
话 ， 你 应 该 考虑 研究 一 下 微软 在 很 棒 的 “响应 式 扩 展 ” 库 (对 于 JavaScript 
来 说 是 RxJS) 中 提供 的 “响应 式 Observable”(http://reactive-extensions. 
github.io/RxJS/)。 它 比 我 们 这 里 展示 的 要 高 级 和 强大 得 多 。 另 外 ，Andre 
Staltz 有 一 篇 优秀 的 文章 (https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) 
赞扬 了 RP 的 高 效 ， 并 给 出 了 具体 的 例子 。 























B.2.1 ESY7 Observable 


在 编写 本 书 的 时 候 ， 已 经 有 早期 的 ES7 提案 提出 了 一 个 称 为 Observable 的 新 数据 类 型 ， 它 
的 思路 和 我 们 这 里 给 出 的 类 似 ， 不 过 肯定 要 更 复杂 一 些 。 














这 类 Observable 的 概念 是 这 样 的 :“ 订 阅 ” 到 一 个 流 的 事件 的 方式 是 传人 一 个 生成 器 一 一 
实际 上 其 中 有 用 的 部 分 是 迭代 器 一 事件 每 次 发 生 都 会 调用 迭代 器 的 next(..) 方 法。 








你 可 以 把 它 想象 成 类 似 这 样 : 
// someEventStream 是 一 个 事件 流 ,比如 来 自 鼠 标点 击 或 其 他 








var observer = new Observer( someEventStream, function*(){ 
while (var evt = yield) { 
console.log( evt ); 
} 
} ); 
传人 的 生成 器 将 会 yield 暂停 那个 while 循环 ， 等 待 下 一 个 事件 。 每 次 someEventStrean 发 
布 一 个 新 事件 ， 都 会 调用 到 附加 到 生成 器 实例 上 的 迭代 器 的 next(..)， 因 此 事件 数据 会 用 
evt 数据 恢复 生成 器 / 迫 代 器 。 


在 这 里 的 对 事件 的 订阅 功能 中 ， 重 要 的 是 运 代 器 部 分 ， 而 不 是 生成 器 部 分 。 所 以 ， 从 概念 
上 说 ， 实 际 上 你 可 以 传人 任何 iterable， 包 括 ASQ.iterable() 可 迭 代 序 列 。 








有 趣 的 是 ， 也 有 关于 适配器 的 提案 来 简化 从 某 些 流 类 型 构造 Observable， 比 如 用 于 DOM 
事件 的 fromEvent(..)。 如 果 你 查看 前 面 给 出 链接 的 ES7 提案 中 建议 的 fromEvent(..) 实 


现 ， 你 会 发 现 它 看 起 来 和 我 们 在 下 一 市 将 要 看 到 的 ASQ.react(..) 惊人 的 相似 。 









































当然 ， 这 些 都 是 早期 的 提案 ， 因 此 真正 的 最 终 实现 可 能 和 这 里 的 展示 在 形式 和 行为 方式 
上 都 有 很 大 不 同 。 但 是 ， 看 到 不 同 的 库 和 语言 提案 之 间 对 概念 的 早期 整合 还 是 很 令 人 激 
动 的 ! 
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B.2.2 ”响应 序列 
有 了 这 个 非常 简要 的 Observable (以 及 F/RP) 的 概述 给 予 我 们 灵感 和 激励 ， 现 在 我 要 展示 
“响应 式 Observable” 的 一 个 小 子 集 的 修改 版 ， 我 称 之 为 “响应 式 序列 ”。 


首先 ， 让 我 们 从 如 何 使 用 名 为 react(..) 的 asynquence 插件 工具 创建 一 个 Observable 开 
始 : 


var observable = ASQ.react( function setup(next){ 
listener.on( "foobar", next ); 


3 





现在 ， 来 看 看 如 何 定义 一 个 能 “响应 ”这 个 observable 的 序列 (在 F/RP 中 ， 这 通常 称 为 
“订阅 ”) : 


observable 
.seq( .. ) 
.then( .. ) 
.VaL( .. ); 





是 不 是 ? 


所 以 ， 只 要 结束 Observable 链接 就 定义 了 序列 。 很 简单 


在 F/RP 中 ,事件 流 通常 从 一 系列 函数 变换 中 穿 过 ， 比 如 scan(..)、map(..)、reduce(..)， 
等 等 。 使 用 响应 式 序 列 的 话 ， ee ag 我 们 来 看 一 个 较 具 体 
的 例子 : 








ASQ.react( function setup(next){ 
document .getELementById( "mybtn" ) 
.addEventListener( "click", next, false ); 


.seq( function(evt){ 
var btnID = evt.target.id; 
return request( 
"http://some.url.1/?id=" + btnID 
); 
站) 
.VaL( function(text){ 
console.log( text ); 


a 
这 个 响应 序列 的 “响应 ”部 分 来 自 于 分 配 了 一 个 或 多 个 事件 处 理 函 数 来 调用 事件 触发 器 
(调用 next(..))。 


向 应 序列 的 “序列 ”部 分 就 和 我 们 已 经 研究 过 的 序列 完全 一 样 : 每 个 步骤 可 以 使 用 任意 合 
里 的 异步 技术 ， 从 continuation 到 Promise 再 到 生成 器 


一 旦 建立 起 响应 序列 ， 只 要 事件 持续 触发 ， 它 就 会 持续 启动 序列 实例 。 如 果 想 要 停止 响应 
序列 ， 可 以 调用 stop()。 


























一 


























YH 
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如 果 响 应 序列 调用 了 stop()， 停止 了 ， 那 你 很 可 能 希望 事件 处 理 函 数 也 被 注销 。 可 以 注册 
一 个 teardown 处 理 函 数 来 实现 这 个 目的 : 





























var sq = ASQ.react( function setup(next,registerTeardown){ 
var btn = document.getELementById( "mybtn" ); 


btn.addEventListener( "click", next, false ); 








// 一 旦 sq.stop() 被 调用 就 会 调用 
registerTeardown( function(){ 
btn.removeEventListener( "click", next, false ); 








}); 
}) 
.Seq( .. ) 
.then( .. ) 
.val( .. ) 
// 将 来 
sq.stop(); 








ea 


as setup(..) 中 的 this 绑 定 引 用 和 响应 序列 sq 一样， 所 以 你 可 以 使 用 
个 this 引用 向 响应 序列 定义 添加 内 容 ， 调 用 像 stop() 这 样 的 方法 ， 等 等 。 























这 里 是 一 个 来 自 Node.js 世界 的 例子 ， 使 用 了 响应 序列 来 处 理 到 来 的 HTTP 请 求 : 


var server = http.createServer(); 
server.listen(8000); 


// 响应 式 observer 

var request = ASQ.react( function setup(next,registerTeardown){ 
server.addListener( "request", next ); 
server .addListener( "close", this.stop ); 


registerTeardown( function(){ 
server.removeListener( "request", next ); 
server.removeListener( "close", request.stop ); 
}); 
]); 


// 响应 请 求 

request 

.Seq( pullFromDatabase ) 

.val( function(data,res){ 
res.end( data ); 


上 


// 节点 清除 
process.on( "SIGINT", request.stop ); 
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使 用 onStream(..) 和 unSstream(..)， 触 发 器 next(..) 也 很 容 


ASQ.react( function setup(next){ 
var fstream = fs.createReadStream( "/some/file" ); 


// 把 流 的 "data" 事 件 传 给 next(..) 


next.onStream( fstream ); 


// 侦 听 流 结尾 
fstream.on( "end", function(){ 
next.unStream( fstream ); 


} ); 
}) 
.Seq( .. ) 
.then( .. ) 
ValC ,3 


也 可 以 通过 序列 合并 来 组 合 多 个 响应 序列 流 : 


ASQ.react( .. ).seq( .. ).then( .. ); 
ASQ.react( .. ).seq( .. ).then( .. ); 


var sql 
Var sq2 


var sq3 = ASQ.react(..) 
.gate( 
sq1， 
Sq2 
) 
.then( .. ); 


主要 的 一 点 是 : ASQ.react(..) 是 F/RP 概念 的 一 个 轻 量 级 的 修改 版 ， 也 是 术语 “响应 序 
列 ” 的 意义 所 在 。 响 应 序列 通常 能 够 胜任 基本 的 响应 式 用 途 。 


这 里 有 一 个 使 用 AsQ.react(..) 管 理 UI 状 态 的 例子 (http:Wjsbin,comy/ 
rozipaki/6/edit?js,output)， 还 有 一 个 通过 AsQ.react(..) 处 理 HTTP 请 求 / 响 
应 流 的 例子 (https://gist.github.com/getify/bbaSec0de9d6047b720e)。 


B.3 生成 器 协 程 

希望 第 4 章 已 经 帮助 你 熟悉 了 ES6 生成 器 。 有 具体 来 说 ， 我 们 想 要 再 次 讨论 “生成 器 并 发 ”， 
甚至 更 加 深入 。 

设想 一 个 工具 runALL(..)， 它 能 接受 两 个 或 更 多 的 生成 器 ， 并 且 并 发 地 执行 它们 ， 让 它们 
依次 进行 合作 式 yield 控制 ， 并 支持 可 选 的 消息 传递 。 








除了 可 以 运行 单个 生成 器 到 结束 之 外 ， 我 们 在 附录 A 讨论 的 ASQ#runner(..) 是 runAll(..) 
概念 的 一 个 相似 实现 ， 后 者 可 以 并 发 运行 多 个 生成 器 到 结束 。 
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因此 ， 让 我 们 来 看 看 如 何 实现 第 4 章 中 并 发 Ajax 的 场景 : 


ASQ( 
"http://some.url.2" 
) 


.runner( 
function*(token){ 
// 传递 控制 
yield token; 





var UrL1 = token.messages[0]; // "http://some.url.1" 


// 清空 消息 ,重新 开始 


token.messages = []; 














var p1 = request( url1 ); 





[一 


// 传递 控制 
yield token; 


token.messages.push( yield p1 ); 
js 


function*(token){ 
var UrL2 = token.messages[0]; // "http://some.url.2" 


// 传递 消息 并 传递 控制 
token.messages[0] = "http://some.url.1"; 
yield token; 














var p2 = request( url2 ); 





// 传递 控制 
yield token; 


token.messages.push( yield p2 ); 


// 把 结果 传 给 下 一 个 序列 步骤 
return token.messages; 
} 
) 
.val(l function(res){ 
// res[90] 来 自 "http://some.url.1" 
// res[1] 来 自 "http://some.url.2" 
} ); 





ASQ#runner(..) 和 runALL(..) 之 间 的 主要 区 别 如 下 。 


。 每 个 生成 器 ( 协 程 ) 都 被 提供 了 一 个 叫 作 token 的 参数 。 这 是 一 个 特殊 的 值 ， 想 要 显 式 
把 控制 传递 到 下 一 个 协 程 的 时 候 就 yield 这 个 值 。 

。 token.messages 是 一 个 数组 ， 其 中 保存 了 从 前 面 一 个 序列 步骤 传 入 的 所 有 消息 。 它 也 是 
一 个 你 可 以 用 来 在 协 程 之 间 共 享 消息 的 数据 结构 。 

。 yield 一 个 Promise( 或 序列 ) 值 不 会 传递 控制 ,而 是 暂停 这 个 协 程 处 理 , 直 到 这 个 值 准备 好 。 








ee 
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。 从 协 程 处 理 运 行 最 后 return 的 或 yield 的 值 将 会 被 传递 到 序列 中 的 下 一 个 步骤 。 
在 基本 的 AsQ#runner(..) 功能 之 上 添加 辅助 函数 用 于 不 同 的 用 途 也 是 很 容易 实现 的 。 





状态 机 
对 许多 程序 员 来 说 ， 一 个 可 能 很 熟悉 的 例子 就 是 状态 机 。 在 简单 的 装饰 工具 的 帮助 下 ， 你 
可 以 创建 一 个 很 容易 表达 的 状态 机 处 理 器 。 





让 我 们 来 设想 这 样 一 个 工具 。 我 们 将 其 称 为 state(..)， 并 给 它 传 人 两 个 参数 : 一 个 状态 
值 和 一 个 处 理 这 个 状态 的 生成 器 。 创 建 和 返回 要 传递 给 AsQ#runner(..) 的 适配器 生成 器 这 
样 的 苗 活 将 由 state(..) 负责 。 


考虑 : 








function state(val,handler) { 
// 为 这 个 状态 构造 一 个 协 程 处 理 函 数 
return function*(token) { 
// 状态 转移 处 理 函 数 
function transition(to) { 
token.messages[0] = to; 








} 


// 设 定 初始 状态 (如 果 还 未 设 定 的 话 ) 
if (token.messages.length < 1) { 
token.messages[0] = val; 
































} 
// 继续 ,直到 到 达 最 终 状 态 (false) 
while (token.messages[0] !== false) { 
// 当前 状态 与 这 个 处 理 函 数 匹 配 吗 ? 
if (token.messages[0] === val) { 
// 委托 给 状态 处 理 函 数 
yield *handler( transition ); 
} 
// 还 是 把 控制 转移 到 另 一 个 状态 处 理 函数 ? 
if (token.messages[0] !== false) { 
yield token; 
} 
} 


所 
} 
如 果 仔 细 观 察 的 话 ， 可 以 看 到 state(..) 返回 了 一 个 接受 一 个 token 的 生成 器 ， 然 后 它 建 
立 了 一 个 while 循环 ， 该 循环 将 持续 运行 ， 直 到 状态 机 到 达 终 止 状态 〈 这 里 我 们 随机 设 定 
为 值 false)。 这 正 是 我 们 想 要 传 给 ASQ#runner(..) 的 那 一 类 生成 器 1 

















我 们 还 随意 保留 了 token.messages[9] 槽 位 作为 放置 状态 机 当前 状态 的 位 置 ， 用 于 追踪 ， 
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这 意味 着 我 们 甚至 可 以 把 初始 状态 值 作为 种 子 从 序列 中 的 前 一 个 步骤 传人 。 
如 何 将 辅助 函数 state(..) 与 ASQ#runner(..) 配合 使 用 呢 ? 
Var prevState; 


ASQ( 
/* 可 选 :初始 状态 值 */ 
2 


) 
// 运行 状态 机 
// 转移 : 2 -> 3 -> 1 -> 3 -> false 
.runner( 
// 状态 1 处 理 函 数 
state( 1, function *stateOne(transition){ 
console.log( "in state 1" ); 





prevState = 1; 
yield transition( 3 ); // 转移 到 状态 3 
】 )， 


// 状态 ?2 处理 函数 
state( 2, function *stateTwo(transition){ 
console.log( "in state 2" ); 





prevState = 2; 
yield transition( 3 ); // 转移 到 状态 3 
} )， 


// 状态 3 处 理 函 数 
state( 3, function *stateThree(transition){ 
console.log( "in state 3" ); 





if (prevState === 2) { 
prevState = 3; 
yield transition( 1 ); // 转移 到 状态 1 


1 完毕 ! 
else { 
yield "That’s all folks!"; 
prevState = 3; 
yield transition( false ); // 最 终 状态 
} 
二 本 


) 
// 状态 机 完毕 ,继续 
.VaL( function(msg){ 
console.log( msg ); // 就 这 些 ! 


] ); 





有 很 重要 的 一 点 需要 指出 ， 生 成 器 *state0ne(..)、*stateTwo(..) 和 *stateThree(..) 三 
者 本 身 在 每 次 进入 状态 时 都 会 被 再 次 调用 ， 而 在 你 通过 transition(..) 转移 到 其 他 值 时 就 
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会 结束 。 尽 管 这 里 没有 展示 ， 但 这 些 状 态 生 成 器 处 理 函 数 显 然 可 以 通过 yield Promise/ 序 
列 /thunk 来 异步 暂停 。 

底层 隐藏 的 由 辅助 函数 state(..) 产生 并 实际 上 传 给 ASQ#runner(..) 的 生成 器 是 在 整个 状 
态 机 生存 期 都 持续 并 发 运行 的 ， 它 们 中 的 每 一 个 都 会 把 协作 式 yield 控制 传递 到 下 一 个 ， 
以 此 类 推 。 








查看 这 个 ping pong 的 例子 (http://jsbin.com/qutabu/1/edit?js,output)， 可 以 得 
到 更 多 关于 使 用 由 ASQ#runner(..) 驱动 的 生成 器 进行 协作 式 并 发 的 示例 。 


B.4 通信 顺序 进程 


1978 年 ，C. A. R. Hoare 在 一 篇 学 术 论文 中 (http://dl.acm.org/citation.cftm?doid=359576.359585) 
首次 描述 了 通信 顺序 进程 (Communicating Sequential Processes，CSP) ， 然 后 又 在 1985 年 的 
同名 著作 中 讨论 了 这 个 概念 (http:/www.usingcsp.com/)。CSP 描述 了 一 种 并 发 “进程 ”在 运 
行 过 程 中 彼此 交互 (通信 ) 的 正式 方法 。 

你 可 能 已 经 想起 了 我 们 在 第 1 章 中 讨论 的 并 发 “进程 ”， 此 处 对 CSP 的 探索 将 建立 在 对 其 
的 理解 之 上 。 

和 计算 机 科学 领域 多 数 伟 大 的 概念 一 样 ，CSP 也 带 有 浓烈 的 学 术 形 式 体系 色彩 ， 以 进程 代 
数 的 形式 表达 。 但 我 觉得 符号 代数 原理 对 你 来 说 不 会 有 什么 实际 的 意义 ， 所 以 我 们 将 要 寻 
找 其 他 方法 来 思考 CSP。 

我 把 多 数 CSP 的 正式 描述 和 证 明 交 给 霍 尔 的 研究 以 及 自 他 以 后 许多 其 他 有 趣 的 文章 。 而 我 
将 要 做 的 就 是 以 尽 可 能 非 学 术 化 的 易于 直觉 理解 的 方式 简要 介绍 CSP 的 思路 。 






































B.4.1 消息 传递 

CSP 的 核心 原则 是 独立 的 进程 之 间 所 有 的 通信 和 交互 必须 要 通过 正式 的 消息 传递 。 可 能 与 
你 预期 的 相反 ，CSP 消息 传递 是 用 同步 动作 来 描述 的 ， 其 中 发 送 进程 和 接收 进程 都 需要 准 
备 好 消息 才能 传递 。 


这 样 的 同步 消息 机 制 怎 么 可 能 与 JavaScript 的 异步 编程 联系 在 一 起 呢 ? 











关系 的 具体 化 来 自 于 使 用 ES6 生成 器 创建 看 似 同 步 但 底层 可 能 是 同步 或 (更 可 能 的 ) 异步 
动作 的 方法 的 特性 。 
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换 句 话说 ， 两 个 或 更 多 并 发 运行 的 生成 器 可 以 彼此 之 间 用 看 似 同步 的 形式 进行 消息 传递 ， 
同时 保持 系统 的 异步 本 性 ， 因 为 每 个 生成 器 的 代码 都 被 暂停 (阻塞 ) 了 ， 等 待 一 个 异步 动 
作 来 恢复 。 


这 是 如 何 工作 的 呢 ? 


设想 一 个 名 为 A 的 生成 器 (“进程 ”)， 想 要 发 送 一 个 消息 给 生成 器 B。 首 先 A yield 要 发 
给 B 的 这 个 消息 (因此 暂停 了 A)， 等 B 就 绪 并 拿 到 这 个 消息 时 ，A 就 会 被 恢复 (解除 
阻塞 ) 。 


对 称 地 ， 设 想 A 要 接收 一 个 来 自 B 的 消息 。A yield 它 对 来 自 于 B 的 这 个 消息 的 请 求 ( 因 
此 暂停 A)。 而 一 旦 B 发 送 了 一 个 消息 ，A 就 拿 到 消息 并 恢复 执行 。 
这 种 CSP 消息 传递 的 一 个 更 流行 的 实现 来 自 ClojureScript 的 core.async 库 ， 还 有 go > 


言 。 这 些 CSP 实现 通过 开放 在 进程 间 的 称 为 通道 (channel) 的 管道 实现 了 前 面 描述 的 
信 语 义 。 




















0 > 原因 是 ， 在 一 些 模式 中 可 以 一 次 发 送 多 个 值 到 通道 的 缓 
冲 区 ， 这 可 能 类 似 于 你 对 流 的 认识 。 这 里 我 们 并 不 深入 探讨 ， 但 要 了 解 ， 对 
be 它 可 以 是 非常 强大 的 技术 。 























在 最 简单 的 CSP 概念 中 ， 我 们 在 A 和 B 之 间 创 建 的 通道 会 有 一 个 名 为 take(..) 的 方法 用 
于 阻塞 接收 一 个 值 ， 还 有 一 个 名 为 put(.…) 的 方法 用 于 阻塞 发 送 一 个 值 。 


这 看 起 来 可 能 类 似 于 : 





var ch = channel(); 


function *foo() { 
var msg = yield take( ch ); 


console.log( msg ); 


} 


function *bar() { 
yield put( ch, "Hello World" ); 


console.log( "message sent" ); 


} 


run( foo ); 

run( bar ); 

// Hello World 

// "message sent" 


比较 这 个 结构 化 的 、( 看 似 ) 同步 的 消息 传递 交互 和 ASQ#runner(..) 通过 数组 token. 
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messages 及 合作 式 yield 提供 的 非 正 式 非 结 构 化 的 消息 共享 机 制 。 本 质 上 ， yield put(..) 
是 一 个 既 发 送 了 值 也 暂停 了 执行 来 传递 控制 的 单个 操作 ， 而 在 前 面 我 们 给 出 的 例子 中 这 两 
者 是 分 开 的 步骤 。 


另外 ，CSP 强调 你 并 不 真正 显 式 地 传递 控制 ， 而 是 设计 并 发 例 程 来 阻塞 等 待 来 自 于 通道 的 
值 或 阻塞 等 待 试图 发 送 值 到 这 个 通道 。 协 调 顺 序 和 协 程 之 间 行 为 的 方式 就 是 通过 接收 和 发 
送 消 息 的 阻塞。 














告 : 这 个 模式 非常 强大 ， 但 是 一 开始 用 起 来 也 有 些 费 脑筋 。 需 要 进行 
关 践 才能 习惯 这 种 新 的 协调 并 发 的 思考 模式 。 





有 几 个 很 好 的 库 已 经 用 JavaScript 实现 了 CSP， 其 中 最 著名 的 是 js-csp (https://github.com/ 
ubolonton/js-csp)， 由 James Long (http://twitter.com/jlongster) 实现 (http://github.com/jlongster/ 
js-csp) 并 扩展 (http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript)。 此 
外 ，David Nolen (http://twitter.com/swannodette) 的 关于 把 ClojureScript 的 go 风格 core.async 
CSP 移植 到 JS 生成 器 风格 的 众多 文章 也 非常 重要 (http://swannodette.github.io/2013/08/24/es6- 


generators-and-csp/) 。 





B.4.2 asynquence CSP 模拟 


由 于 我 们 这 里 一 直 讨 论 的 异步 模式 都 是 在 我 的 asynquence 库 的 大 背景 下 进行 的 ， 因 此 你 可 

能 有 兴趣 看 到 我 们 可 以 相当 轻松 地 在 AsQ#runner(..) 生成 器 处 理 上 添加 一 个 模拟 层 ， 作 为 
CSP API 和 特性 的 近乎 完美 的 移植 。 这 个 模拟 层 作 为 asynquence-contrib 包 的 一 个 可 选 部 分 
与 asynquence 一 起 发 布 。 











与 前 面 的 辅助 函数 state(..) 非常 相似 ，AsQ.csp.go(..) 接受 一 个 生成 器 一 一 在 go/ 
core.async 术语 中 ， 它 被 称 为 goroutine 并 通过 返回 一 个 新 的 生成 器 将 其 适 配 为 可 与 
ASQ#runner(..) 合作 。 











goroutine 接收 一 个 最 初创 建 好 的 通道 (ch) ， 而 不 是 被 传人 一 个 token， 一 次 运行 中 的 所 有 
goroutien 都 会 共享 这 个 通道 。 你 可 以 通过 ASQ.csp.chan(..) 创建 更 多 的 通道 (这 常常 会 极 
其 有 用 ! )。 


在 CSP 中 ， 我 们 把 所 有 的 异步 都 用 通道 消息 上 的 阻塞 来 建 模 ， 而 不 是 阻塞 等 待 Promise/ 序 
列 /thunk 完成 。 

















因此 ， 不 是 把 从 request(..) 返回 的 Promise yield 出 来 ， 而 是 request(..) 应 该 返回 一 个 
通道 ， 从 中 你 可 以 take(..) ( 拿 到 ) 值 。 换 句 话说， 这 种 环境 和 用 法 下 单 值 通道 大 致 等 价 
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于 Promise 或 序列 。 


我 们 先 来 构造 一 个 支持 通道 的 request(..) 版 本 : 


function request(url) { 
var ch = ASQ.csp.channel(); 
ajax( url ) .then( function(content){ 


// putAsync(..) 的 put(..) 的 一 个 变异 版 本 ,这 个 版 本 

// 可 以 在 生成 器 之 外 使 用 。 返 回 一 个 运算 完毕 promise。 

// 这 里 我 们 没有 使 用 这 个 promise, 但 是 如 果 当 值 被 

// take(..) 之 后 我 们 需要 得 到 通知 的 话 ,可 以 使 用 这 个 promise。 
ASQ.csp.putAsync( ch, content ); 

































































return ch; 


由 第 3 章 可 知 ，promisory 是 生产 Promise 的 工具 ; 第 4 章 里 的 thunkory 是 生产 thunk 的 工 
具 ; 以 及 最 后 在 附录 A 中 ， 我 们 发 明了 sequory 来 表示 生产 序列 的 工具 。 


很 自 





然 地 ， 我 们 要 是 

















次 构造 一 个 类 似 的 术语 以 表示 生产 通道 的 工具 。 我 们 就 称 之 为 


chanory (channel+factory) 吧 。 作 为 留 给 你 的 练习 ， 请 试 着 定义 一 个 类 似 于 Promise. 
wrap(.…)/promisify(..) (第 3 章 )、thunkify(..) (第 4 章 ) 和 ASQ.wrap(..) (附录 人 A) 的 
channelify(..) 工具。 





现在 芳 虑 使 用 asynquence 风格 的 CSP 实现 的 并 发 Ajax 的 例子 : 


ASQ.csp.go( function*(ch){ 


yield ASQ.csp.put( ch, "http://some.url.2" ); 


var UrL1 = yield ASQ.csp.take( ch ); 
// "http://some.url.1" 


var res1 = yield ASQ.csp.take( request( url1 ) ); 


yield ASQ.csp.put( ch, res1 ); 


ASQ.csp.go( function*(ch){ 


var UrL2 = yield ASQ.csp.take( ch ); 
// "http://some.url.2" 


yield ASQ.csp.put( ch, "http://some.url.1" ); 


yield ASQ.csp.take( request( url2 ) ); 
yield ASQ.csp.take( ch ); 


Var res2 = 
Var resi1 = 
// 把 结果 传递 到 下 一 个 序列 步骤 
ch.buffer_size = 2; 
ASQ.csp.put( ch, res1 ); 
ASQ.csp.put( ch, res2 ); 
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}) 
) 
.val( function(res1,res2){ 
// resil 来 自 "http://some.url.1" 
// res2 来 自 "http://some.urL.2" 
】 ); 


在 两 个 goroutine 之 间 交 换 URL 字符 串 的 销 息 传 递 过 程 是 非常 直接 的 。 第 一 个 goroutine 构 
造 一 个 到 第 一 个 URL 的 Ajax 请 求 ， 响应 放 到 通道 ch 中 。 第 二 个 goroutine 构造 一 个 到 第 
二 个 URL 的 Ajax 请 求 ， 然 后 从 通道 ch 拿 到 第 一 个 响应 res1。 这 时 ， 两 个 响应 res1 和 
res2 便 都 已 经 完成 就 绪 了 。 

















如 果 在 goroutine 运行 结束 时 ， 通 道 ch 中 还 有 任何 剩 下 的 值 ， 那 它们 就 会 被 传递 到 序列 的 

一 个 步骤 。 所 以 ， 要 从 最 后 的 goroutine 传 出 消息 ， 可 以 通过 put(..) 将 其 放 入 ch 中 。 
如 上 所 示 ， 为 了 避免 这 些 最 后 的 put(..) 阻塞 ， 我 们 通过 将 ch 的 buffer_size 设置 为 2 
(默认 : 9) 而 将 ch 切换 为 缓冲 模式 。 

















在 这 个 参考 地 址 (https://gist.github.com/getify/e0d04f1f5aa24b1947ae) 可 以 看 
到 更 多 使 用 asynquence 风格 的 CSP 的 示例 。 


B.5 小 结 
Promise 和 生成 器 提供 了 基础 构建 单元 ， 可 以 在 其 之 上 构建 更 高 级 、 功 能 更 强大 的 异步 。 


asynquence 提供 了 一 些 工具 ， 用 于 实现 可 迭代 序列 、 响 应 序列 (Observable)、 并 发 协 程 其 
至 CSP goroutine。 





这 些 模式 ， 与 continuation 回调 和 Promise 功能 相 结 合 ， 给 予 asynquence 多 种 不 同 的 强大 
的 异步 功能 。 所 有 这 些 功能 都 集成 进 了 一 个 简洁 的 异步 流程 控制 抽象 : 序列 。 
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“你 不 知道 的 JavaScript” 系 列 就 是 要 让 不 求 甚 解 的 JavaScript 开 发 者 迎 难 而 上 ， 深 入 语言 内 部 ， 弄 清楚 
JavaScript 每 一 个 零 部 件 的 用 途 。 本 书 介绍 了 该 系列 的 两 个 主题 : “类 型 和 语法 ”以 及 “异步 和 性 能 ”。 
掌握 了 这 些 知识 之 后 ， 无 论 什 么 技术 、 框 架 和 流行 词语 ， 你 都 能 轻松 理解 。 


作者 介绍 


Kyle Simpson 作家 、 培 训 师 、 讲 师 、 开 源 社 区 的 活跃 成 员 ， 推 崇 开 放 的 互联 网 ， 对 JavaScript、HTML5、 
实时 / 端 对 端 通信 和 Web 性 能 有 深入 研究 。 


封面 设计 : Ellie Volckhausen 张 健 O'REILLY” 














i Non oreilly.com ISBN 978-7-115-43116-5 
i YouDontKnowJS.com 

分 类 建议 ”计算 机 // 程 序 设计 /JavaScript 

人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 

OReilly Media, Inc. 授 权 人 民 邮 电 出 版 社 出 版 。 

















此 简体 中 文 版 仅 限于 中 国 大 陆 (不 包含 中 国 香港 、 澳 门 特别 行政 区 和 中 国 台湾 地 区 ) 销售 发 行 
This Authorized Edition forsaleonlyintheterritory of Peoples Republic of China (excluding ISBN 978-7-115-43116-5 
Hong Kong, Macao and Taiwan) 定价 : 79.00 元 
































看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 
或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨 论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


